The SVG is a two-dimensional vector graphics that based on XML. It’s a pure XML vector based graphic. SVG stands for Scalable Vector Graphics. We use SVG to create and display 2D Graphics on your website.
SVG Advantages
- SVG file are optimized and small
- Persist Image quality on retina displays
- Images don’t lose quality when the image scaled, zoomed or even resized
- W3C recommendation
- Can be created with text editor
- SVG files are XML file
- Can be searched, indexed, scripted, and compressed
- Not required a fancy equipment to create SVG images, can create withtext editor
Useful HTML Tag for SVG
<svg>
<circle>
<rect>
<line>
<ellipse>
<polyline>
<polygon>
<path>
Use SVG To Draw Circle
<svg width="100" height="100">
<rect width="100" height="100" style="fill:blue;"/>
</svg>
Use SVG To Draw Rectangle
<svg width="100" height="100">
<rect width="100" height="100" style="fill:blue;"/>
</svg>
Use SVG To Draw Line
<svg height="80" width="200">
<line x1="0" y1="0" x2="100" y2="50" style="stroke:rgb(0,0,255);stroke-width:2" />
</svg>
Browser Compatibility
Browser | Chrome | Edge | Firefox | Opera | Safari |
---|---|---|---|---|---|
<svg> | 4+ | Yes | 3+ | 10+ | 4+ |