SVG Introduction
Scalable Vector Graphics (SVG) better known as SVG is an XML-based format for drawing vector images. It is used to draw dimensional vector images.>
Prerequisite
Before proceeding with this course you should have a basic knowledge of XML, HTML and JavaScript.
What is SVG?
SVG, Scalable Vector Graphics is an XML-based language to describe vector-based graphics.
- SVG is intended to display images on the web.
- As it is vector images, SVG image does not lose quality no matter how they are zoomed in or enlarged.
- SVG images support collaboration and animation.
- SVG is W3C standard.
- Other image formats such as raster images can also be grouped with SVG images.
- SVG integrates well with XSLT and HTML DOM.
Benefits
- Use any text editor to create and edit SVG images.
- Based on XML, SVG images are searchable, indexable and unpublished and compressed.
- SVG images are very impressive as they can lose quality no matter how they are zoomed in or edited.
- Excellent print quality in any decision
- SVG Open Level
Draw a circle in web browser Code Exp.
<svg width="200" height="200"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="2" fill="red" /> </svg>
Result:
How to SVG integrates with HTML
- <svg> Element indicates the start of SVG image.
- <svg> Element width and object length define the height and width of the SVG image.
- In the example above, we used the <circle> element to draw a circle.
- cx and attribute cy represents the center of the circle. The default value is (0,0). r represents the diameter of the circle.
- Some attributes are controlled by strokes and strokes the definition of a circle.
- fill in the attribute that describes the fill color of the circle.
- Closing tag </svg> indicates the end of the SVG image.
