這篇文章帶給大家的內容是關於HTML5如何使用SVG（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
程式碼最佳化永遠是程式設計師亙古不變的需求，而合理的利用SVG圖片來取代部分PNG/JPG等格式的圖片則是前端優化重要的一環，既然是最佳化，那我們先來看看SVG圖片都有哪些優點：
SVG 可被非常多的工具讀取和修改（例如記事本）
SVG 與JPEG 和GIF 影像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 影像可在任何的解析度下被高品質地列印
#SVG 可在影像品質不下降的情況下放大
SVG 影像中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
SVG 可以與Java 技術一起運行
#SVG 是開放的標準
SVG 文件是純粹的XML
<svg> <g> <path></path> <path></path> </g> </svg>
不了解SVG的同學現在一定一臉問號，就跟我第一次見他們一樣，別急，我們從基礎看起。
SVG 是一種基於 XML 語法的影像格式，全名為可縮放向量圖（Scalable Vector Graphics）。其他影像格式都是基於像素處理的，SVG 則是屬於對影像的形狀描述，所以它本質上是文字文件，體積較小，且不管放大多少倍都不會失真。此外SVG 是萬維網聯盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體。
在HTML5 中，您能夠將SVG 元素直接嵌入HTML 頁面中,例如上面的那顆小紅心：
<svg> <defs> <rect></rect> <mask> <use></use> </mask> </defs> <g> <use></use> <path></path> </g> </svg>
SVG 程式碼也可以寫在一個以.svg結尾的文件中，然後用<img alt="HTML5如何使用SVG（程式碼範例）" >、<object></object>、<embed></embed>、<iframe></iframe>等標籤插入網頁。
<img alt="HTML5如何使用SVG（程式碼範例）" > <object></object> <embed> <iframe></iframe></embed>
CSS也可以使用svg
.logo {
background: url(logo.svg);
}SVG 檔案也可以轉為 BASE64 編碼，然後作為 Data URI 寫入網頁。
<img alt="HTML5如何使用SVG（程式碼範例）" >
SVG的語法
#1.
SVG 程式碼都放在頂層標籤
<svg> <circle></circle> </svg>
如果只想展示 SVG 影像的一部分，就要指定viewBox屬性。
<svg> <circle></circle> </svg>
注意，視窗必須適配所在的空間。上面程式碼中，視窗的大小是 50 x 50，由於 SVG 影像的大小是 100 x 100，所以視窗會放大去適合 SVG 影像的大小，也就是放大了四倍。
如果不指定width屬性和height屬性，只指定viewBox屬性，則相當於只給定 SVG 影像的長寬比。這時，SVG 圖片的預設大小將等於所在的 HTML 元素的大小。
2.
<svg> <circle></circle> <circle></circle> <circle></circle> </svg>
上面的程式碼定義了三個圓。
class屬性用來指定對應的 CSS 類別。
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}SVG 的 CSS 屬性與網頁元素有所不同。
fill：填滿顏色
stroke：描邊色
stroke-width：邊框寬度
3.
#< ;line>標籤用來繪製直線。
<svg> <line></line> </svg>
上面程式碼中，
4.
<svg> <polyline></polyline> </svg>
5.
<svg> <rect></rect> </svg>
6.
<svg> <ellipse></ellipse> </svg>
7.
<svg> <polygon></polygon> </svg>
8.
<svg> <path></path> </svg>
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
9.
<svg> <text>肆客足球</text> </svg>
10.
<svg> <circle></circle> <use></use> <use></use> </svg>
11.
<svg> <g> <text>圆形</text> <circle></circle> </g> <use></use> <use></use> </svg>
12.
<svg> <defs> <g> <text>圆形</text> <circle></circle> </g> </defs> <use></use> <use></use> <use></use> </svg>
13.
<svg> <defs> <pattern> <circle></circle> </pattern> </defs> <rect></rect> </svg>
上面代码中，
14.
<svg> <image></image> </svg>
上面代码中，
15.
<svg> <rect> <animate></animate> </rect> </svg>
上面代码中，矩形会不断移动，产生动画效果。
attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate></animate> <animate></animate>
16.
<svg> <rect> <animatetransform></animatetransform> </rect> </svg>
上面代码中，
1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg> <circle></circle> <svg></svg></svg>
上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代码指定，如果点击图形，就改写circle元素的r属性。
2. 获取 SVG DOM
使用<object></object>、<iframe></iframe>、<embed></embed>标签插入 SVG 文件，可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();注意，如果使用<img alt="HTML5如何使用SVG（程式碼範例）" >标签插入 SVG 文件，就无法获取 SVG DOM。
3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<p> <svg> <!-- svg code --> </svg> </p>
使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
img.src = url;然后，当图像加载完成后，再将它绘制到<canvas></canvas>元素。
img.onload = function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};小结
SVG能做的远不止这些，利用SVG做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。
以上是HTML5如何使用SVG（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
