What is SVG?
- SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.
- SVG is intended to display images over the web.
- Being vector images, SVG image never loses quality no matter how they are zoomed out or resized.
- SVG images supports interactivity and animation.
- SVG is a W3C standard.
- Others image formats like raster images can also be clubbed with SVG images.
- SVG integrates well with XSLT and DOM of HTML.
Advantages
- Use any text editor to create and edit SVG images.
- Being XML based, SVG images are searchable, indexable and can be scripted and compressed.
- SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized
- Good printing quality at any resolution
- SVG is an Open Standard
Disadvantages
- Being text format size is larger then compared to binary formatted raster images.
- Size can be big even for small image.
Example
Following XML snippet can be used to draw a circle in web browser.<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /> </svg>Embed the SVG XML directly in an HTML page.
testSVG.htm
<html> <title>SVG Image</title> <body> <h1>Sample SVG Image</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" /> </svg> </body> </html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. In Internet Explorer, activeX controls are required to view SVG images.How SVG integrates with HTML
- <svg> element indicates the start of SVG image.
- <svg> element's width and height attributes defines the height and width of the SVG image.
- In above example, we've used a <circle> element to draw a circle.
- cx and cy attribute represents center of the circle. Default value is (0,0). r attribute represents radius of circle.
- Other attributes stroke and stroke-width controls the outlining of the circle.
- fill attribute defines the fill color of the circle.
- Closing</svg> tag indicates the end of SVG image.
No comments:
Post a Comment