SVG – Scalable Vector Graphics

SVG – Scalable Vector Graphics

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

Output:

SVG output1
SVG output1

 

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other W3C standards such as the DOM and XSL

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

  • SVG images can be created and edited with any text editor
  • SVG images can be searched, indexed, scripted, and compressed
  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • SVG is an open standard
  • SVG files are pure XML

Embed SVG Directly Into HTML Pages

SVG Code explanation:

  • An SVG image begins with an <svg> element
  • The width and height attributes of the <svg> element define the width and height of the SVG image
  • The <circle> element is used to draw a circle
  • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, 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. We set the outline of the circle to a 4px green “border”
  • The fill attribute refers to the color inside the circle. We set the fill color to yellow
  • The closing </svg> tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

SVG Rectangle – <rect>

Example 1

 

Sorry, your browser does not support inline SVG.

 

The <rect> element is used to create a rectangle and variations of a rectangle shape:

Here is the SVG code:

Example

<svg width=”400″ height=”110″>
<rect width=”300″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)” />
</svg>

Code explanation:

  • The width and height attributes of the <rect> element define the height and the width of the rectangle
  • The style attribute is used to define CSS properties for the rectangle
  • The CSS fill property defines the fill color of the rectangle
  • The CSS stroke-width property defines the width of the border of the rectangle
  • The CSS stroke property defines the color of the border of the rectangle

Example 2

SVG output2
SVG output2

<!DOCTYPE html>
<html>
<body>

<svg width=”400″ height=”180″>
<rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

Code explanation:

  • The rx and the ry attributes rounds the corners of the rectangle

Example 3

SVG outaput3
SVG outaput3

 

<!DOCTYPE html>
<html>
<body>

<svg width=”400″ height=”180″>
<rect x=”50″ y=”20″ width=”150″ height=”150″ style=”fill:blue;stroke:pink;stroke-width:5;opacity:0.5″ />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>