SVG – Vector Graphics for web design | Blog

SVG – Vector Graphics for web design

By Stanimira Yovcheva January 20, 2021 How to, Developer Thoughts, Programming, UI/UX Design 11 Minutes

Images on webpages usually render in two formats - raster and vector images. Raster images are photographs in pixels and are typically written with the <img> tag in HTML. They must be scaled or resized according to the device width or height to preserve responsiveness and resolutions. Vector images, on the other hand, use lines, points, and shapes to render images. They could be rendered in HTML using the <img> or <svg> tag.

What is an SVG file?

SVG is an abbreviation for Scalable Vector Graphics, a file format that defines 2D vector graphics in an XML markup language.

Why SVG?

Perfect Resolutions: SVG looks excellent on all retina displays. They are resolution independent and not limited to any device. Where file types like JPG and PNG might get blurry or stretched when zoomed, SVG will maintain the same quality. This makes them a preferred choice for responsive design.
Small File Size: SVG files are usually smaller than JPEG or PNG and compress more easily when optimized. This is a significant advantage in web design because small images load faster.
Easy Modification and Flexibility: You can SVG changes within the code in a text editor in either HTML or CSS. Changes involve size, fonts, colors, animations, and shape, without an external influence. These components are highly flexible and easier to modify within code, unlike raster images.  Externally, asides text editors they could be created and edited with a graphic software tool like Sketch.
Easy Accessibility: Because they are written in just code, SVG images can be searched, indexed, and scripted. Their XML text files nature allows them to be easily readable and indexed by search engines.
Control: A developer using SVG has complete control over the SVG drawing, the effects, animations, text, and placement. Because SVG is XML code itself, every SVG element is also available with the SVG DOM and you can manipulate it with JavaScript.

What is a great purpose of SVG?

SVG can only represent specific details. They have a wide range of applications - logos, interactive maps, charts, graphs, illustrations, text effects, icons, interfaces, and applications. 

How to display SVG

There are two main ways of displaying SVG in code.

1. Directly in an <img> tag. 

When saved as a file extension, SVG files can be embedded directly in the <img> tag. Example,

<img src="myhouse.svg" alt="house">

This file also allows you to use it as a background image.

background-image: url('myhouse.svg');

When placed within the <img> tag, it also embodies the different properties, methods, and selectors of the <img> tag and can be styled in the CSS.

2. Using the <svg> tag.

SVG can be used inline in HTML in an <svg> </svg> tag. The beauty of SVG is not that we can drop images in SVG formats, instead it is because we can make our own drawings, illustrations, and charts in the code itself. For the sake of this tutorial, this is what we will concentrate on.

Some Common Properties and Values in SVG

SVG has some common tags, properties, and values associated with it for drawing. We will find these terms recurring while using SVG.

Predefined shape elements: These are tags for drawing basic and complex elements in SVG. they include, <rect> for rectangle, <circle> for circles, <ellipse> for ellipses, <line> for lines, <ellipse> for ellipses, <polygon> for polygons and <path> for path.
Style: For styling inside the SVG tag.
Cx and cy: These attributes define the x and y coordinates of the center of an element.
Rx and ry: This defines the radius of an element in the x and y axis. Shorthand is r.
Stroke and stroke-width: This controls the outline-color and the outline width or size.
Fill: This defines the color of the element.
Def: def is short for definition and is used to group reusable elements together.
Text: Defines a text.

How to create SVG files: Drawing basic elements

A rectangle with rounded corners

<html> 
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" rx="20" ry="20" width="150" height="150" fill= "orange" stroke="red" stroke-width = "5" opacity="0.5" /> 
    </svg> 
  </body> 
</html>

This demo uses inline HTML code to draw a rectangle. In the next demo, we will use the <style> tag inside the <svg> tag. The height and width defined in the SVG determine the height and width of the element or image.

A circle

<html>
  <body> 
    <svg width="200" height="250"> 
      <circle cx="150" cy="100" r="40"/> 
      <style> 
        circle{ 
          fill: gold; 
          stroke: #000; 
          stroke-width: 7px; 
        }
      </style> 
    </svg>
  </body>
</html>

A line

Straight lines are drawn in SVG by specifying the start and endpoints of the line.

<html> 
  <body>
    <svg width="800" height="500">
      <line x1="30" x2="500" y1="120" y2="120" stroke="black" stroke-width="7" /> 
    </svg>
  </body> 
</html>

Polygons and Polylines

With the help of polygons and polylines you can create lines with many points. A major difference between a polygon and polyline is that in a polygon, the last point is connected to the first point, creating a closed shape. Polylines are open shapes and do not need to be closed.
The SVG points are coordinates of x and y and are used according to the specific shape you like to draw.

<html> 
  <body> 
    <svg height="180" width="500"> 
      <polyline points="0,40 40,40 40,80 70,70 80,120 100,100 120,120, 150,150" style="fill:white;stroke:green;stroke-width:6" /> 
    </svg> 
  </body> 
</html>

<html> 
<body> 
  <svg width="300" height="300"> 
    <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/> 
    <style> 
      polygon{ 
        fill: gold; 
        stroke: blue; 
        stroke-width: 2; 
      }
    </style>
  </svg> 
</body> 
</html>

Texts

The <text> tag defines a text within the SVG. The x and y determine the position of a text. <text> tag combines the best of SVG and common HTML text properties. Just like SVG shapes, it has attributes like fill, stroke, stroke-width, gradient and filters. Like HTML text elements, it has properties like font-family, font-size, font-variant, font-weight, letter-spacing, kerning, word-spacing, and text-decoration. 

<html>
  <body>
    <svg height="90" width="600">
      <text x="0" y="25" fill="red" stroke= "blue" stroke-width = '1' font-size = '30px'>This is a SVG text</text>
    </svg>
  </body>
</html>

We can assign a textPath to a text with a xlink:href. This element describes a path a text should take and aligns the characters along the path. The href in the xlink is the id of the path commands.

<html> 
  <body> 
    <svg width = '500' height= '500'>
<defs>
    <path  id="circletext" d="M243.2, 382.4c-74.8,   
    0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5,
    135.5 S318, 382.4, 243.2, 382.4z" />
    <style>
       
    </style>
</defs> 
    <text dy="70" textLength="1200">
        <textPath xlink:href="#circletext">
            Text in a circular path
        </textPath>
    </text>
  <style>
     text { 
            font-size: 23px;
            font-family: Arial Bold, serif;
            fill: maroon;
            text-transform: uppercase;
            letter-spacing: 22px;
        }
  </style>

</svg>
  </body>
</html>

The <text> element has its own property like the direction that allows us to reverse the direction of characters. Not like a reversed-text but like a mirrored-text.

<html> 
  <body> 
  <svg>
<text x="100" y="50" style="font-size: 40px; direction: rtl; unicode-bidi: bidi-override;">Mirrored Text</text>
</svg>
  </body> 
</html>

Path

The <path> tag is considered the most powerful, resourceful, and comprehensive element that allows you to draw virtually anything in SVG. It creates complex shapes by combining straight lines and curved ones.
<path> takes only one attribute: d. The d attribute is a pointer of commands and points a shape should take.
The commands in a point are

M - Move to
L - Line to
H - Horizontal line to
V - Vertical line to
C - Curve to
S - Smooth to
Q - Quadratic bezier line
T - Smooth quadratic bezier curve to
A - Arc
Z - Close path

These commands tell the direction, position, and shapes an object should take. Each command takes two points separated by a comma. E.g M 120, 100 means move 120 down and 100 right from the current position.
Not all commands are necessary for a single drawing.
The demo below is that of a simple cross with linear gradients instead of a single color. The main commands used here are M, H, and V because in vertical and horizontal placements, we only need straight lines.

<html>
  <body> 
    <svg viewbox = "-0 0 7 5"> 
     <defs> 
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
          <stop offset="0%" style="stop-color:rgb(80,255,0);stop-opacity:1" /> 
          <stop offset="50%" style="stop-color:rgb(150,195,0);stop-opacity:1" /> 
          <stop offset="100%" style="stop-color:rgb(355,0,0);stop-opacity:1" /> 
        </linearGradient> 
      </defs> 
      <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"/> 
      <style> 
        path{
          fill : url(#grad1) 
        }
      </style>
    </svg>
  </body>
</html>

Curved path

A curved path uses either commands A, Q, C or T.

<html>
  <body>
    <svg>
      <path d="M40,20  A30,30 0 0,0 70,70" style="stroke: #cccc00; stroke-width:2; fill:none;"/>
      <path d="M40,20  A30,30 0 1,0 70,70" style="stroke: #ab4432; stroke-width:2; fill:none;"/>
      <path d="M50,150 Q50,100, 0,100" style="stroke: blue; fill: transparent"/>
      <path d="M50,50 C95,90 125,20 150,60" style="stroke: #006666; fill:green;"/>  
    </svg>
  </body>
</html>

Browser Support

The assimilation of SVG in mainstream vector graphics has been somewhat slow because of cross-browser compatibility and vendor support of its native features. A recent test done by Michal Rost shows that it is currently being supported by major browsers including IE 11.

SVG – Vector Graphics for web design