How to Build an Image in Your HTML5 Page with the <svg> Tag
The <svg> element allows you to build a vector-based image directly in the page using the SVG markup language. It’s often used to create charts or other visualizations dynamically. Sample coding looks like this:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="50" cy="50" r="30" style="stroke:#0000ff; stroke-width: 5px; fill:#ff0000;"/> <rect x = "100" y = "0" height = "50" width = "50" stroke-width = "2px" stroke = "#ffff00" fill = "#00ff00" /> </svg>
The output of this sample code looks like:
The main advantage of a vector-based image format like SVG is the ability to scale the image without losing image quality.
All major browsers, except IE versions before IE9, support some level of SVG.
For more information on the SVG standard, check out the W3C SVG page.