What is SVG?
SVG stands for Scalable Vector Graphics and is used for describing 2D-graphics and graphical applications in XML. XML is then rendered by an SVG viewer. SVG is mainly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X-Y coordinate system etc.
Why use SVG?
- SVG images can be created and edited with any text editor.
- SVG images are scalable.
- SVG images can be printed with high quality at any resolution
- SVG images can be searched, indexed, scripted, and compressed
- SVG files are pure XML.
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG Code explanation:
⦁ An SVG image begins with an <svg> tag.
⦁ The width and height attributes of the <svg> element define the width and height of the SVG image.
⦁ The <circle>, <rect>, <polygon> element is used to draw the respective elements to be drawn in SVG.
⦁ The cx and cy attributes define the x and y coordinates. In case of a circle cx and cy refers to the center of the circle. If cx and cy are omitted, the circle’s center is set to (0, 0).
⦁ The r attribute defines the radius of the circle.
⦁ The stroke and stroke-width attributes control how the outline of a shape appears.
⦁ The fill attribute refers to color which should be filled inside the circle.
⦁ The closing </svg> tag closes the SVG image.
SVG Elements:
⦁ <linearGradient>
⦁ <line>
⦁ <circle>
⦁ <rect>
⦁ <ellipse>
⦁ <polygon>
⦁ <polyline>
⦁ <radialGradient>
Let us now look into some of the elements of SVG with code examples.
SVG Circle
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="yellow" /> </svg> </body> </html> |
The output will be:
SVG Rectangle
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:green;stroke-width:5;stroke:blue" /> </svg> </body> </html> |
The output will be:
SVG Rounded Rectangle
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html> |
The output will be:
SVG Line
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <svg height="200"> <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/> </svg> </body> </html> |
The output will be:
SVG Ellipse
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <svg height="200"> <ellipse cx="100" cy="50" rx="100" ry="50" fill="orange" /> </svg> </body> </html> |
The output will be:
SVG Star
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <svg height="200"> <polygon points="100,10 40,180 190,60 10,60 160,180" fill="orange"/> </svg> </body> </html> |
The output will be:
Conclusion:
I hope you have understood the SVG concepts. If you have any query you can write us at support@acadgild.com
Leave a Reply