Ankit Joshi

SVG in HTML

Ankit Joshi's photo
Ankit Joshi
·

6 min read

While creating a user-friendly website, you may run into some issues with images, particularly with image resolution. The image quality is an integral part of every great web design, there are hardly a few things that look less professional on a page than a distorted, poorly scaled logo, icon, or photo.

The image quality issue has only been amplified with the new responsive design trend. Visitors will be accessing your content on both computers and smartphones alike. Therefore your images should be optimized for all devices like the rest of the content on your website.

Now the question is, how we can optimize the image quality on our website? Is there any digital format that can maintain the image quality and make photographs seem great regardless of their size?

One such tool that can optimize the image quality regardless of its size is to keep images in SVG file format, on your website

What is SVG?.

SVG, short for Scaler Vector Graphics is a vector image format written in XML language. It is the W3C recommended graphics format for your website.

SVGs are a website designer's magic trick: not only do they generate clean visuals at any scale, but also, they are search engine optimizable, programmable, generally smaller than other formats, and capable of dynamic animations.

What is a Vector image format?

There are two ways to depict an image digitally: one is by using a large number of dots (also known as pixels), and the other is by using geometry.

Pixels are used to create common images such as photographs and most digital images. Bitmaps, often known as raster images, are the name given to these images. Bitmaps are made up of a lot of tiny color blocks called pixels, which is why you can identify each pixel individually if you zoom in far enough. PNG, JPEG, and GIF are the most prevalent bitmap image file extensions.

Vectors are the second approach to creating an image digitally. A vector graphic is a picture constructed with dots and lines that are composed using mathematical formulas. A vector, in other terms, is made up of hundreds of thousands of tiny lines and curves (also known as paths). As a result, you may zoom in and zoom out of a vector image forever without it changing, becoming blurry, or becoming 'pixelated' and blocky like a raster image.

<svg> element in HTML

The <svg> element is a container that is used to define a new coordinate system and viewport, it works as the outermost element of the SVG document. It can also be used for embedding an SVG fragment inside the HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>A page</title>
  </head>
  <body>
    <svg width="10" height="10">
      <rect x="0" y="0" width="10" height="10" fill="#59fa81" />
    </svg>
  </body>
</html>

We can also display SVG images in the browser by including them in a <img> tag.

<img src="image.svg" alt="SVG image" />

The svg image displayed using <img> tags can also change the size while maintaining its image quality. However, there are some restrictions if you want to make major style changes to the SVG image.

SVG Elements

The graphics created using SVG format are displayed on a coordinate plane that starts at 0,0 at the top-left of the drawing area and extends “from left to right for x, and from top to bottom for y”.

SVG document uses many elements to create graphics, out of them some of the most commonly used are:

  • text: it creates a text element
  • circle: it creates a circle
  • rect: it creates a rectangle
  • line: it creates a line
  • path: it creates a path between two points
  • polygon: it is used to create any kind of polygon
  • g: groups separate elements

<text> element adds the text that can be selected using a mouse. It uses x and y attributes to define the starting point of the text.

<svg>
  <text x="5" y="20">Hello Text</text>
</svg>

<circle> creates a circle object where cx and cy are the x and y coordinates of the center, r is used for the radius, and fill represents the figure color.

<svg>
  <circle cx="60" cy="60" r="50" fill="#d85b49" />
</svg>

<rect> creates a rectangle where x and y are starting coordinates, width and height represent the width and height of the rectangle.

<svg>
  <rect x="0" y="0" width="100" height="100" fill="#d85b49" />
</svg>

<line> creates a line where x1 and y1 are starting coordinates, x2 and y2 are ending coordinates, and stroke represents the line color

<svg>
  <line x1="0" y1="0" x2="100" y2="50" stroke="#59fa81" />
</svg>

<path> is the most powerful tool to draw using SVG, albeit it’s the most complex. A path is a sequence of lines and curves. It uses d attribute for directions commands. These commands start with the command name, and a set of coordinates:

  • M = move to
  • L = line to
  • H = horizontal line to
  • V = vertical line to
  • C = curveto
  • S = smooth curve to
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
<svg height="300" width="300">
<path
d="M 100 100 L 200 100 V 200 H 10 V 40 H 70 Z"
fill="#59fa81"
stroke="#d85b49"
stroke-width="3"
/>
</svg>

<polygon> can draw any random polygon where points attribute represents a set of x, y coordinates the polygon should link

<svg>
  <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"
fill="#59fa81"/>
</svg>

<g> tag is used to group multiple svg elements

<svg width="200" height="200">
  <rect cx="50" cy="50" r="50" fill="#529fca" />
  <g id="rect-group">
    <rect x="0" y="100" width="100" height="100" fill="#59fa81" />
    <rect x="100" y="0" width="100" height="100" fill="#ad4a3d" />
  </g>
</svg>

SVG viewport and viewBox

The viewport for SVG is defined using width and height attributes, it defines the size of element relative to its container. 

<svg width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

You can use viewBox attribute in element to only show a portion of the SVG. It defines a new coordinates system inside the SVG canvas.

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>

Insert SVG in Web Pages

There are many methods for inserting SVG file on a web page, some of these methods work by: using an img tag using the CSS background-image property using svg inline tag in the HTML using object, iframe, or embed tag

Conclusion

SVG is a great file format for all the graphic material on your webpage. It shows its real potential in responsive websites. You can also use Javascript and CSS to expand the functionality of your SVG file.

Furthermore, you do not have to code your SVG files, nowadays almost all the latest designing software provides SVG file format to save graphic materials. You can directly insert your SVG file in your webpage using any of the aforementioned methods.

HTML5SVGWeb DevelopmentWeb DesignCSS3