svg simple examples

Short intro to SVG and some simple examples

intro

SVG, that stands for scalable vector graphis, is a web friendly vector-based file format used to render two-dimensional images on the internet, and it is written in pure XML ¹, which makes it can be created or edited using any text and code editor. Other than to code SVG, there is also a lot of drawing applications available that can be used to open and edit SVG files ². There are some reasons to use SVG, where one of them is SEO (search engine optimization) friendly that allowing keywords, descriptions, and links addition directly to the markup ³. Infinity scalability, small file size, editability, and accessiblity are advantages of SVG files, while complexity and browser support are the disadvantages ⁴. Image stored as SVG does not require compression compared to other formats ⁵.

How to create SVG basic shapes and text, group elements, and perform some transformations will be discussed here in brief but hopefully sufficient clear.

minimal lines

Let us make a SVG file with minimal content as displayed below

with

<svg height="100" width="100">
  <circle r="45" cx="50" cy="50" fill="red" />
</svg>

is the code.

Notice that above code if for SVG embeded inline in a HTML file. For serving the SVG as image/svg+xml or application/xhtml+xml or any other MIME type that causes the user agent to use an XML parser then it requires to add xmlns="http://www.w3.org/2000/svg attribute and value to <svg> element ⁶.

The line <circle r="45" cx="50" cy="50" fill="red" /> can be replaced by folowing lines

• <rect x="5" y="30" width="90" height="40" fill="blue" />
• <ellipse rx="45" ry="20" cx="50" cy="50" fill="green" />
• <line x1="20" y1="20" x2="80" y2="80" stroke="black" />
• <polygon points="20,20 50,80 80,20" fill="magenta" />
• <polyline points="20,80 50,20 80,80" stroke="magenta" fill="none" />
• <path d="M20 20 L50 20 L25 50 v20 h30" fill="none" stroke="black" />
• <text x="5" y="50" fill="darkgreen">Hello, World!</text>

and you get the others basic SVG shapes and text, where

are the results and also with the first one. More complex drawing can be built based on above given shapes and text.

viewport

A viewport, a “port” through which you can “view” a section of an SVG image, is something akin to a porthole window through which you can see the world beyond ⁷, the phrase can be considered as a way to explain about SVG view port. Let us have following code

<svg height="100" width="100" style="background: #f8f8f8;">
  <circle r="20" cx="25" cy="25" fill="salmon" />
  <rect x="55" y="5" width="40" height="40" fill="cornflowerblue" />
  <path d="M25,55 l20,20 l-20,20 l-20,-20 l20,-20" fill="darkkhaki" />
  <polygon points="55,55 95,55 75,95" fill="violet" />
</svg>

for this SVG image

with attributes height="100" and width="100". Notice that all objects are drawn within the range of the viewport so all can be seen. Let us change only value of width and height and then display the result.

Table 1. Some values for SVG viewport width, height, and the output results.

It can be seen from Table 1 that viewport width and height act like window dimension on the wall but with origin, the top left corner, is a fixed point.

viewbox

Next to explore is ‘viewBox’ attributes that has four parameters, min-x, min-y, width, height that are supplied without comma in a string as viewBox = "min-x min-y width height" ⁸.

In explaining the use of viewBox attribute previous code is used with addtional lines

with

<svg height="100" width="100" style="background: #f8f8f8;"
 viewBox="0 0 100 100">
  <circle r="20" cx="25" cy="25" fill="salmon" />
  <rect x="55" y="5" width="40" height="40" fill="cornflowerblue" />
  <path d="M25,55 l20,20 l-20,20 l-20,-20 l20,-20" fill="darkkhaki" />
  <polygon points="55,55 95,55 75,95" fill="violet" />
</svg>

as the default code. Notice the difference between that code and the previous one.

Table 2. Some values for SVG viewBox min-x, min-y, width, height, and the output results.

Here some some explanation for the output on Table 2.

• Params 1. It is original viewBox all objects can be seen through the viewport.
• Param 2. Since width and height both are decreased to 75, it behaves like zooming in until width and height of the viewBox fit the viewport.
• Param 3. Furhter zooming in is performed and half in width and height must fit into the viewport, so only quarter of the original image, left top part, can be seen.
• Param 4. Using original width and height values, which are both 100, set the min-x and min-y both to 50. It will shift the original image 50 in horizontal and vertical directions showing only purple down triangle.
• Param 5. Let us now modify all four values min-x, min-y, width, and height to 25, 25, 50, 50, respectively. It will zoom in and shift in both horizontal and vertical directions as shown.

Notice that zooming in can be achieved when width and height in viewBox is smaller than width and height in the viewport, while zooming out can be achieved when they are larger.

Can you guess what the values of min-x, min-y, width, and height of the viewBox for most left SVG image above? They are 0 0 200 200. Check your answer. And how about the rest?

elements grouping

There is <g> element, stands for ‘group’, which is used for logically grouping together sets of related graphical elements ⁹, that

• usually has an id attribute to give that group a name for refering to,
• groups all of its descendants into one group,
• makes it easy to add styles, transformations, interactivity, and even animations to entire groups of objects.

Any styles, you apply to the <g> element will also be applied to all of its descendants. It is also with the transformation.

Above example is already using <g> element and also <style> element, with

<svg width="200" height="100" style="background: #f8f8f8;"
 viewBox="0 0 200 100">
  <style>
    #top, #bottom {
      fill: cornflowerblue;
      stroke-width: 2px;
      stroke: midnightblue;
    }
    #shell { 
      fill: cornflowerblue;
    }
    #left, #right {
      stroke: midnightblue;
      stroke-width: 2px;
    }
    #symbol {
      font-size: 200%;
    }
    #textbg {
      fill: gold;
    }
  </style>
  <g id="container">
  	<title>Radioactive container</title>
    <desc>An image of a container containing radioactive substance.</desc>
    <ellipse id="bottom" rx="20" ry="10" cx="35" cy="70" />
    <rect id="shell" x="15" y="20" width="40" height="50" />
    <line id="left" x1="15" y1="20", x2="15" y2="70" />
    <line id="right" x1="55" y1="20", x2="55" y2="70" />
    <ellipse id="top" rx="20" ry="10" cx="35" cy="20" />
    <g id="symbol">
      <circle id="textbg" r="11" cx="35" cy="54" />
      <text id="text" x="22", y="65">☢</text>
    </g>
    <ellipse id="hole" rx="4" ry="2" cx="45" cy="20" />
  </g>
</svg>

is the whole code.

reuse grouped elements

Modify previous code by putting <g id="container2"> element, as an update from previous one, inside a <defs> element, so it will not be drawn until it is called using <use> element.

Above result is obtained by adding following lines

  <use xlink:href="#container2" transform="translate(0, 0)" />
  <use xlink:href="#container2" transform="translate(50, -5)" />
  <use xlink:href="#container2" transform="translate(32, 15)" />
  <use xlink:href="#container2" transform="translate(82, 10)" />
  <use xlink:href="#container2" transform="translate(135, 10)" />

after <defs> element into previous code. Can you point which line relate to which container object?

rotate

Actually one of SVG transformation, which is translate(), has been used in previous example. Now other SVG tranformation, rotate() ¹⁰, will be discussed.

By modifying previous code with following lines

  <use xlink:href="#container2" transform="rotate(-10)" />
  <use xlink:href="#container2" transform="rotate(10)" />

previous result is obtained. The rotation is in degree and clockwise direction. Negative values means the direction is counter clockwise. To study the rotation, previous SVG image is modified as following

<svg width="200" height="200" style="background: #f8f8f8;"
 viewBox="-60 -60 200 200">
  <style>
    #top, #bottom {
      fill: cornflowerblue;
      stroke-width: 2px;
      stroke: midnightblue;
    }
    #shell { 
      fill: cornflowerblue;
    }
    #left, #right {
      stroke: midnightblue;
      stroke-width: 2px;
    }
    #symbol {
      font-size: 200%;
    }
    #textbg {
      fill: gold;
    }
    #zero {
      fill: red;
    }
  </style>
  <defs>
    <g id="container3">
      <title>Radioactive container</title>
      <desc>An image of a container containing radioactive substance.</desc>
      <circle id="zero" r="2" cx="0" cy="0" />
      <ellipse id="bottom" rx="20" ry="10" cx="35" cy="70" />
      <rect id="shell" x="15" y="20" width="40" height="50" />
      <line id="left" x1="15" y1="20", x2="15" y2="70" />
      <line id="right" x1="55" y1="20", x2="55" y2="70" />
      <ellipse id="top" rx="20" ry="10" cx="35" cy="20" />
      <g id="symbol">
        <circle id="textbg" r="11" cx="35" cy="54" />
        <text id="text" x="22", y="65">☢</text>
      </g>
      <ellipse id="hole" rx="4" ry="2" cx="45" cy="20" />
    </g>
  </defs>
  
  <use xlink:href="#container3" transform="rotate(0)" />
</svg>

which produces

where the red dot on the left top corner is point on (0, 0) coordinates. This point will help us to understand three argments supported by the rotation().

Above figure shows result of rotate() with single argument with value: 45 (left), -45 (center), and -90 (right). Notice that the origin (0, 0) does not change since it is the pivot or rotation point.

Let us now draw addition point, e.g. blue point at (50, 0) and use it as rotation point.

Results of rotate(angle, 50, 0) are shown in above figure with angle value is 45, -45, and 90, respectively. Notice the second and third arguments given to rotate() is for rotation point coordinates.

translate - rotate

Let us try to use two transformations one first and then followed by the other.

Above figure shows that transformations, in this case translation and rotation, depend on the order. Final result will be different when it is rotated first and translated, compared to translated first then rotated. Notice also that after rotation, translation is still using orginal axes, original x and y axes.

closing

After read this post you are be able create SVG basic shapes and text, group those elements and reuse it, and finally perform transformations, translate and rotate, on the grouped elements.

notes