SVG as a Modern Web Graphics Design

Table of Contents

In this article, i covered following points of SVG:

• # What is SVG?
• # Why use SVG? – Pros and Cons
• # How to make SVG? – Tools
• # Basic shapes of SVG
• # How to use SVG on the web?
• # Exporting SVG for web
• # Browser Support
• # More resources about SVG

What is SVG?

SVG stands for Scalable Vector Graphics which can describe in:

S – We can zoom or resize image at any size without losing quality.
V – It is not pixel based, means all shaped are defined by geometry instead of dots (.).
G – Obviously, it is graphic.

Before we dive into SVG, at least we should know what is SVG?

The SVG specification is an open standard developed by the WWW Consortium (W3C) since 1999. It is the XML based language that defines 2D (two-dimensional) vector graphics.

Why use SVG?

SVG is a vector graphics so it is truly scalable. Depending on how you implement SVG, it offers more control than with an image. We can target each element separately via CSS because SVG is in xml format.

Pros

• SVG graphics are vector graphics, so they can be resized without losing quality.
• SVG file might also be smaller in size than raster (.jpeg, .gif, .png) graphics.
• Size is small so obviously web page load is faster.
• SVG is a W3C recommendation.
• SVG defines graphics in XML format.

Cons

• Older browsers are not able to render SVG.

How to Make SVG?

Let’s have a look at some tools to work with SVG.

1. W3C Amaya – An open source editor/browser
2. InkScape – An open source graphics drawing tool with advanced features, using SVG as a native format
3. SVG-edit – A simple browser based SVG drawing tool
4. Adobe Illustrator – A Professional commercial vector graphics drawing tool
5. CorelDRAW – A Professional commercial vector graphics drawing tool

Basic Shapes of SVG

SVG has some built in shape elements that are as under:

1. Rectangle
2. Circle
3. Ellipse
4. Line
5. Polyline
6. Polygon
7. Path

<rect>

The <rect> element is used to create a rectangle. There are six basic attributes that control the position and shape of the rectangle.

<rect x="0" y="0" width="200" height="200" style="fill:skyblue;stroke:lightpink;stroke-width:10;" />

Preview

Attributes

• x – The x position of top left corner.
• y – The y position of top left corner.
• rx – The x radius of corner.
• ry – The y radius of corner.
• width – The width of the rectangle.
• Height – The height of the rectangle.

<circle>

The <circle> element is used to draw circle on the screen. There are three attributes that define the position and radius of circle.

<circle cx="100" cy="100" r="97" style="fill:skyblue;stroke:lightpink;stroke-width:5;" />

Preview

Attributes

• x – The x position of the center of the circle.
• y – The y position of the center of the circle.
• r – Defines the radius of the circle.

<ellipse>

The <ellipse> element is similar to <circle> element, but here we can specify x and y radius separately. Let’s see the following example.

<ellipse cx="100" cy="100" rx="97" ry="50" style="fill:skyblue;stroke:lightpink;stroke-width:5;" />

Preview

Attributes

• cx – The x position of the center of the ellipse.
• cy – The y position of the center of the ellipse.
• rx – The x radius of the ellipse.
• ry – The y radius of the ellipse.

<line>

It is line, just straight line. It takes four attributes to draw a line which determine start and end point of the line.

<line x1="25" y1="25" x2="175" y2="175" style="stroke:lightpink;stroke-width:5" />

Preview

Attributes

• x1 – Starting x position of the line.
• y1 – Starting y position of the line.
• x2 – Ending x position of the line.
• y2 – Ending y position of the line.

<polyline>

Polylines are group of connected straight lines. All points are included in single attribute that why list can get quit long.

<polyline points="50 50, 100 50, 100 100, 150 100, 150 150" style="fill:none;stroke:lightpink;stroke-width:5" />

Preview

Attrributes

• points – It accepts multiple values which is called points. Each of them have a two value x and y.

<polygon>

Polygon is similar to <polyline>, it accepts list of points and these points make up a polygon. All coordinate values are in the user coordinate system.

<polygon points="100 3, 132 60, 197 72, 153 120, 162 190, 100 160, 37 190, 48 120, 3 72, 67 60" style="fill:skyblue;stroke:lightpink;stroke-width:3" />

Preview

Attributes

• points – It accepts multiple values which is called points. Each of them have a two value x and y. For example, points=“0 0, 1 1, 2 2” then closing path would be drawn from (2 2) to (0 0).

<path>

Path is the most important shape of SVG. With the help of <path> element, we can draw any shapes including curve, rounded rectangle etc. Also we can create Bézier curves, quadratic curves, rectangular shapes etc.

<path d="m 160.53125,0.90625 -0.34375,0.75 -48.75,102.625 -112.1875,18.0625 -0.78125,0.125 L -0.9375,123 81.625,201.09375 64.09375,313.375 l -0.125,0.78125 0.71875,-0.375 99.75,-54.40625 101.375,51.34375 0.71875,0.34375 -0.15625,-0.78125 -20.90625,-111.65625 80.15625,-80.5625 0.59375,-0.5625 -0.8125,-0.125 -112.6875,-14.625 -51.8125,-101.125 -0.375,-0.71875 z m 0.0312,1.8125 51.5625,100.59375 0.0937,0.15625 0.1875,0.0312 112.09375,14.5625 -79.71875,80.125 -0.15625,0.15625 0.0312,0.1875 20.8125,111.09375 -100.84375,-51.0625 -0.1875,-0.0937 -0.1875,0.0937 L 65,312.6875 82.4375,201 82.46875,200.78125 82.3125,200.65625 0.1875,123 111.78125,105.03125 111.96875,105 l 0.0937,-0.1875 48.5,-102.09375 z" style="fill:black;" />

Preview

Attributes

• d – A list of points and other commands about how to draw a path. There are following commands available for path:
  • M – moveto
  • L – lineto
  • H – horizontal lineto
  • V – vertical lineto
  • C – curveto
  • S – smooth curveto
  • Q – quadratic Bézier curveto
  • T – smooth quadratic Bézier curveto
  • A – elliptical arc
  • Z – close path

Actually, we don’t need to remember everything in path element because we don’t create SVG vectors manually (most of time).

Note: All above commands can be expressed in upper case or lower case where upper case means absolute position and lower case means relative position.

How to use SVG on the Web?

Here we get to the fun bit. There are a number of ways you can implement SVG on a web. So let’s start.

Using HTML

<img src="butterfly.svg" alt="I can't fly" width="150px" height="150px" />

Using CSS

header {
     height: 150px;
     width: 150px;
     background-image: url('butterfly.svg');
}

PHP Emebed

<?php include("butterfly.svg"); ?>

Inline SVG

<body>
     <!-- Your SVG Code -->
</body>

Inline SVG fallback

<!--[if gte IE 9]><!-->
  <svg>
    ...
  </svg>
<!--<![endif]-->

<!--[if lte IE 8]>
  <img src="butterfly.png" alt="I can't fly">
<![endif]-->

Using Object

<object type="image/svg+xml" data="butterfly.svg">
     <!-- Fallback image -->
</object>

Iframe embed

<iframe src="butterfly.svg">
     <!-- Fallback image -->
</iframe>

Exporting SVG for Web

First of all, draw something in Adobe Illustrator. Here I’ve drawn simple butterfly.

When you are done, save it as SVG.

When you save, it will prompt for SVG options, examine the SVG options dialog box. SVG 1.1 (it is second edition) is the best export for web.

Now open your .SVG file and use this code in your HTML document. When we directly insert SVG markup into HTML document, it becomes inline SVG.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="27.922 23.094 519 402">
     <path class="butterfly" fill="orange" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M36.595,28.623c0,0,82.812,86.513,66.903,145.784 c-12.306,45.847,2.51,68.922,2.51,68.922s16.396-19.703,62.073-12.852c37.043,5.557,50.205,20.327,50.205,20.327 s-52.066-37.653-137.599,20.301c87.081,48.075,30.416,117.125,108.267,151.459c1.091-0.149,32.916-79.909,99.481-85.375 c66.548,5.482,98.362,85.226,99.454,85.375c77.851-34.334,21.187-103.384,108.267-151.459 c-85.531-57.954-137.599-20.301-137.599-20.301s13.161-14.771,50.205-20.327c45.678-6.852,62.073,12.852,62.073,12.852 s14.815-23.075,2.511-68.922c-15.909-59.271,66.902-145.784,66.902-145.784S376.836,63.226,296.294,197.654 c0.307-10.404,1.226-30.15,4.147-54.352c4.005-33.19,12.359-51.842,12.359-51.842s7.236,4.774,13.588-2.483 c8.618-9.848-4.026-21.305-13.588-12.96c-10.959,9.564-23.563,75.061-24.065,135.197c-0.107,0.209-0.223,0.417-0.328,0.628 c-0.103-0.208-0.195-0.422-0.3-0.628c-0.503-60.137-13.106-125.633-24.065-135.197c-9.562-8.344-22.206,3.113-13.588,12.96 c6.351,7.257,13.588,2.483,13.588,2.483s8.354,18.652,12.36,51.842c2.921,24.201,3.84,43.947,4.147,54.352 C200.008,63.226,36.595,28.623,36.595,28.623z M97.358,75.226c0,0,49.19,11.829,100.327,49.877 c64.202,47.769,90.422,113.478,90.422,113.478l0.3-13.069l0.328,13.069c0,0,26.221-65.709,90.422-113.478 c51.137-38.048,100.327-49.877,100.327-49.877s-35.757,60.083-20.546,102.564c12.225,34.139-1.527,43.001-1.527,43.001 s-82.44-21.808-125.402,49.958c62.325-34.146,101.156-19.26,136.37-0.873c0,0-38.171,24.652-43.301,61.719 c-6.128,44.276-27.395,54.844-27.395,54.844s-29.165-35.653-53.86-46.767c-23.304-10.487-51.901-15.456-55.088-15.989v-0.109 c0,0-0.254,0.047-0.3,0.055c-0.053-0.009-0.328-0.055-0.328-0.055v0.109c-3.243,0.543-31.811,5.514-55.088,15.989 c-24.695,11.113-53.861,46.767-53.861,46.767s-21.266-10.567-27.394-54.844c-5.13-37.066-43.301-61.719-43.301-61.719 c35.214-18.387,74.045-33.273,136.371,0.873c-42.961-71.767-125.402-49.958-125.402-49.958s-13.752-8.862-1.528-43.001 C133.115,135.309,97.358,75.226,97.358,75.226z M273.947,209.496c21.57,41.128-2.811,74.215-2.811,74.215 s-3.711,36.089,16.971,109.249c20.683-73.16,16.999-109.249,16.999-109.249s-24.408-33.087-2.838-74.215l-14.161,12.469 L273.947,209.496z"/>
</svg>

Preview

Browser Support

Note: SVG is not supported in IE8 and its older versions. More about SVG browser support at Can I use?

More Resources

• Basic SVG Shapes
• Understanding SVG Path – MDN
• Resolution independence with SVG – SmashingMagazine
• Using SVG – CSS-Tricks
• SVG animations, CSS animations and CSS transitions – Adobe Blog
• Exporting SVG for the Web using Adobe Illustrator – Adobe.com
• Demo – Interactive SVG coordinate system – By Sara Soueidan