HTML5 inline SVG
- HTML5 Canvas
- HTML5 Canvas vs SVG
HTML5 inline SVG is supported.
What is SVG?
- SVG refers to a scalable vector graphic (Scalable vector graphics)
- SVG is used to define vector-based graphics for the network
- SVG defines graphics using XML format
- SVG images have no loss of graphics quality when zooming in or out of size
- SVG is the standard of the World Wide Web Consortium
Advantages of SVG
Compared to other image formats (such as JPEG and GIF), the advantage of using SVG is that:
- SVG images can be created and modified by a text editor
- SVG images can be searched, indexed, scripted, or compressed
- SVG is scalable
- SVG images can be printed with high quality at any resolution
- SVG can be amplified when the image quality is not degraded
Browser support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG.
Embed SVG directly into an HTML page
In HTML5, you can embed SVG elements directly into an HTML page:
Instance
<! DOCTYPE html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
Try it yourself.
Results:
To learn more about SVG, please read our SVG tutorial.
Http://www.w3school.com.cn/svg/index.asp
H5 inline SVG