079_html5内联SVG
生活随笔
收集整理的這篇文章主要介紹了
079_html5内联SVG
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. html5支持內(nèi)聯(lián)SVG。
2. 什么是SVG?
2.1. SVG指可伸縮矢量圖形(Scalable Vector Graphics)。
2.2. SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形。
2.3. SVG使用XML格式定義圖形。
2.4. SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失。
2.5. SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)。
3. SVG與其他圖像格式相比(比如: JPEG和GIF)的優(yōu)勢
3.1.?SVG圖像可通過文本編輯器來創(chuàng)建和修改。
3.2.?SVG圖像可被搜索、索引、腳本化或壓縮。
3.3.?SVG是可伸縮的。
3.4.?SVG圖像可在任何的分辨率下被高質(zhì)量地打印。
3.5.?SVG可在圖像質(zhì)量不下降的情況下被放大。
4. 瀏覽器支持: Internet Explorer 9+、Firefox、Chrome以及Safari支持內(nèi)聯(lián)SVG。
5. 把SVG直接嵌入html頁面
5.1. 在html5中, 您能夠?qū)VG元素直接嵌入html頁面中:
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>svg</title></head><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><!-- points定義五個點(diǎn)的位置分別是: 100,10 40,180 190,60 10,60 160,180 --><!-- 使用紅色填充五角星、五角星邊線使用藍(lán)色、邊線3px、evenodd奇偶填充規(guī)則 --><polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:blue; stroke-width:3; fill-rule:evenodd;" /></svg></body> </html>5.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的079_html5内联SVG的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 078_html5Canvas
- 下一篇： 080_html5 Canvas和SVG