HTML5 Graphics SVG(Scalable Vector Graphics)

Explains the SVG image format commonly used on the web.
Tags:

SVG Element

The svg element stands for Scalable Vector Graphics and is an XML-based W3C graphics standard recommendation. The canvas element that had been used previously could not represent vector images.

However, the svg element makes it possible to represent vector images that are not affected by pixels on pixel-based web pages. Therefore, this element is very effective for representing vector-based diagrams such as charts and graphs.

  • The content is an XML-based text file.
  • Unlike GIF, PNG, and JPEG, which are bitmap formats, SVG is vector-format data based on coordinate information.
  • Even when greatly enlarged or displayed on high-resolution displays such as Retina displays, the pixels seen in bitmap data do not stand out.
  • In addition to displaying SVG with the <img> tag, it can also be written directly inside an HTML file.
  • There is no need to prepare separate image files for smartphones or high-resolution displays.
  • It is suitable for images drawn by combining straight lines and curves. It is not suitable for photographic data.
  • It can also be used for transparency and animation.
  • It is basically text data, but gzip-compressed files can also be used.
  • The extension is *.svg, and gzip-compressed files use *.svgz.
  • The MIME type is image/svg+xml.
  • It can also be combined with JavaScript.
  • Because entering XML by hand is not easy, SVG files are often exported from drawing software such as Illustrator.
  • W3C recommended SVG 1.0 in 2001, SVG 1.1 in 2003, and SVG 1.1 2nd Edition in 2011.
  • At first, Microsoft recommended VML and Adobe recommended PGML, but SVG became the industry standard.

Specifications

Major Supported Web Browsers

The major web browser versions that support the svg element are as follows.

element ie Edge chrome firefox safari opera
svg 9.0 12 4.0 3.0 3.2 10.1

How to Write SVG

Using SVG as an Image File

SVG can be loaded as a regular image file with <img>, background-image, and similar mechanisms.

svg-sample.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="60" fill="#ddd" />
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>

SVG

You can display it in HTML as follows.

<img src="/images/svg/svg-sample.svg" width="100" height="60">    // Uncompressed file

SVGZ Alternatively, you can gzip-compress the *.svg file above, change its extension to *.svgz, and load it.

<img src="/images/svg/svg-sample.svgz" width="100" height="60">   // gzip-compressed file

Display

Writing SVG as Tags

You can also write SVG directly inside HTML as shown below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Test</title>
</head>
<body>
<svg x="0" y="0" width="100" height="60" style="background-color: #ddd">
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>
</body>
</html>

Drawing

Let’s look at how to draw lines, rectangles, polygons, circles, ellipses, paths, animations, and links.

Line

A straight line is drawn in the following format.

<line x1=value y1=value x2=value y2=value...>

The attributes of the line element used to draw a line are as follows.

attribute description
x1 Sets the x-coordinate of the position where the line starts.
y1 Sets the y-coordinate of the position where the line starts.
x2 Sets the x-coordinate of the position where the line ends.
y2 Sets the y-coordinate of the position where the line ends.

The following example draws a line by using the line element. SVG

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <line x1="5" y1="20" x2="100" y2="20" stroke="orange" stroke-width="2"></line>
</svg>

Display

Rectangle - Rect

A rectangle is drawn in the following format.

<rect x= y= width= height=...>

Specify x (upper-left X), y (upper-left Y), width, height, and other values.

The attributes of the rect element used to draw a rectangle are as follows.

attribute description
width Sets the width of the shape.
height Sets the height of the shape.
stroke Sets the border color of the shape.
stroke-width Sets the border thickness of the shape.
fill Sets the color used to fill the shape.
opacity Sets the transparency of the shape.

The following example draws a rectangle by using the rect element.

Example 1.

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    This sentence appears when the user's web browser does not support the svg element!
</svg>

Example 2.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2" />
</svg>

Example 3. You can set each attribute individually as above, or set them all at once by using the style attribute as in the following example.

<svg width="200" height="150">
    <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>

Rounded Rectangle - rect

You can draw a rectangle with rounded corners by adding the x, y, rx, and ry attributes to the rect element.

The attributes of the rect element used to draw a rounded rectangle are as follows.

attribute description
x Sets the x-coordinate of the upper-left corner of the rectangle.
y Sets the y-coordinate of the upper-left corner of the rectangle.
rx Sets the x-axis radius of the corner curve of the rectangle.
ry Sets the y-axis radius of the corner curve of the rectangle.

Example

<svg width="250" height="200">
    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"
        stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

Circle

The attributes of the circle element used to draw a circle are as follows.

attribute description
cx Sets the x-coordinate of the center of the circle.
cy Sets the y-coordinate of the center of the circle.
r Sets the radius of the circle.

The following example draws a circle by using the circle element.

Example

<svg width="300" height="300">
    <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

Ellipse

The attributes of the ellipse element used to draw an ellipse are as follows.

attribute description
cx Sets the x-coordinate of the center of the ellipse.
cy Sets the y-coordinate of the center of the ellipse.
rx Sets the x-axis radius of the ellipse.
ry Sets the y-axis radius of the ellipse.

The following example draws an ellipse by using the ellipse element.

Example

<svg width="300" height="200">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

Polygon

A polygon is drawn in the following format.

<polygon points=...>

The attributes of the polygon element used to draw a polygon are as follows.

attribute description
points Sets the coordinates where each vertex of the polygon will be displayed.

The points attribute specifies the x-coordinate and y-coordinate of each vertex that makes up the polygon. In other words, it specifies vertices as x1 y1, x2 y2, x3 y3, and so on. Starting from the first vertex, lines are connected in order to the last vertex to represent the polygon. The end of the vertices closes toward the starting point.

The following example draws a star-shaped polygon by using the polygon element.

Example 1.

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <polygon points="5 20, 20 5, 35 20, 20 35" stroke="black" fill="#fff" stroke-width="2" />
</svg>

 

Example 2.

<svg width="200" height="180" style="background: #ddd">
    <polygon points="10,70 190,70 30,170 100,10 170,170"
       stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

Circle

A circle is drawn in the following format.

<circle cx=value cy=value r=value ...>

Specify cx (center point X), cy (center point Y), r (radius), and other values.

Example

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <circle cx="20" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2" />
</svg>

Ellipse

An ellipse is drawn in the following format.

<ellipse cx=value cy=value rx=value ry=value ...>

Specify cx (center point X), cy (center point Y), rx (radius in the X-axis direction), ry (radius in the Y-axis direction), and other values.

Example

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <ellipse cx="20" cy="20" rx="15" ry="8" stroke="black" fill="#fff" stroke-width="2" />
</svg>

Path

A path is drawn in the following format.

<path d=value ...>

In d, write path drawing commands. M 5 20 means move to x=5, y=20, and L 20 5 means draw a line to x=20, y=5.

  • Move to
    • M ( x y )+ : Move to x, y
  • Lineto
    • L ( x y )+ : Draw a line to x, y
  • Horizontal lineto
    • H ( x )+ : Draw a horizontal line
  • Vertical lineto
    • V ( y )+ : Draw a vertical line
  • Shorhand/smooth curveto
    • S ( x1 y1 x y )+ : Quadratic Bezier curve with control point (x1, y1) and end point (x, y)
  • Curveto
    • C ( x1 y1 x2 y2 x y )+ : Cubic Bezier curve with control point 1 (x1, y1), control point 2 (x2, y2), and end point (x, y)
  • Closepath
    • Z : Close the path

Example

<svg x="0px" y="0px" width="400px" height="40px" style="background: #ddd">
   <path d="M 5 20 L 20 5 L 35 20 L 20 20" stroke="black" fill="transparent" stroke-width="2" />
</svg>

Quadratic Bezier Curve (Start) (x, y) (x1, y1)

Cubic Bezier Curve (Start) (x, y) (x1, y1) (x2, y2)

Animation - animate

Animation is performed as follows.

<animate...>

The attribute specified by attributeName changes from the from value to the to value over the time specified by dur. repeatCount specifies the number of repetitions.

Example

<svg x="0px" y="0px" width="400px" height="40px" style="background-color:#ddd">
  <rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2">
    <animate attributeName="x" from="-30" to="400" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

A link is set as follows.

<a xlink:href="...">

As with HTML <a>, clicking it moves to the URL.

Example

<svg x="0px" y="0px" width="400px" height="60px" style="background-color:#ddd">
  <a xlink:href="https://www.devkuma.com">
    <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd"
      fill="#99f" points="200 10, 220 30, 200 50, 180 30"/>
  </a>
</svg>