All Categories

HTML5 SVG

What is SVG?

Front end 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 attribute define the x and y coordinates. In the 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 a 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 Front end SVG with code examples.

SVG Circle

<!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:
Circle

SVG Rectangle

<!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:
rectangle

SVG Rounded Rectangle

<!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:
rounded rectangle

SVG Line

<!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:
line

SVG Ellipse

<!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:
ellipse

SVG Star

<!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:
star

Conclusion:

I hope you have understood the SVG concepts. If you have any query you can write us at [email protected]
Keep visiting our site www.acadgild.com for more updates on HTML5 SVG and other technologies.NodeJS course details

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close