Our Official Blog

Represent Your Site Graphically by Incorporating SVG

If you are a web designer, then it’s high time for you to know what exactly SVG is and how to use it when it comes to website designing? Well then, here lies the answer of your question? SVG stands for Scalable Vector Graphics. It is a special kind of vector image format that is used for designing the layout of a site graphically. SVG is considered as one of the best rather convenient way to define vector-based graphics for the web.

SVG is unique because of its capability in creating two-dimensional graphics based on a format like Extensible Markup Language (XML), one of the most commonly used markup language. World Wide Web Consortium (W3C) took the initiative to develop a special yet an open standard specification like SVG in the year 1999. Since then, it has been in great use and demand in overall designing of sites because of its flexibility & scalability.

There is no doubt that in saying that SVG provides you the most convenient option of creating images, illustrations, charts and even animations. In addition to this, you can have the liberty of applying colors, gradients and filters of your choice for designing a website by using the SVG specification. In fact, SVG makes the task of incorporating text & images into a site’s design easy and free-flowing.

You can create and even edit SVG images with the help of any text editor. In fact, SVG images are easy to search, index, script and compress because these are scalable in nature. These images are zoomable and easy to print at any resolution without losing its quality. SVG files are open standard and are pure XML. In fact, each and every element in SVG files can be animated. SVG shapes are of various types. Some of them are:

• SVG Rectangle
• SVG Circle
• SVG Ellipse
• SVG Line
• SVG Polygon
• SVG Polyline
• SVG Path
• SVG Text
• SVG Stroking
• SVG Filters
• SVG Filters Intro
• SVG Blur Effects
• SVG Drop Shadows
• SVG Gradients
• SVG Linear
• SVG Radial

Here presents one of the outputs of SVG shape:

<!DOCTYPE html>svg-circle (1)

<svg height="100" width="100">
 <circle cx="50" cy="50" r="40" stroke="yellow" 
stroke-width="6" fill="black" />
 Sorry, your browser does not support inline SVG.


After giving you a brief description of definition, uses and significance of SVG, getting anxious to know why & when to use SVG among various vector graphics is quite obvious for you. Here lies the answer of your question:

• SVG can be used while creating and saving images on some of the commonly used formats like JPEG, GIF or PNG. Unlike other vector graphics, SVG provides you proper drawing instructions. This result in creating outstanding graphics & images.
• Scalability is considered as one of the most important features of a vector graphic like SVG. Therefore, it allows users to access web pages by using SVG from both bigger and smaller devices starting from desktop to iPhone.


• Some of the common yet major browsers such as Chrome, Firefox, Opera and Safari support SVG. This means that text, images, fonts, graphical elements into different shapes like rectangle & circle can be integrated into a site’s design.
• Since SVG is mainly used in XML format, adding title and descriptions through some vital graphical elements like ‘title’ & ‘desc’ becomes easy and convenient for the web designers.


• One of the essential features of SVG is ‘clarity’. It ensures perfect look by having a control on the interactivity and filters on the design of the site.
• With an Adobe Illustrator, you can have the liberty of saving the file directly as an SVG file. In addition to this, saving the SVG to a file means using it directly in a tag like . Here lies an example:

<img alt="Kiwi standing on oval" src="kiwi.svg" />

• One of the advantages of using SVG is that it can be used as a background image. In fact, a web designer can use this vector graphic in Cascading Style Sheets (CSS), one of the best style sheet languages as a background image. Here follows an example:

.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;

While planning to design your site with latest graphics, opting for Scalable Vector Graphics (SVG) is worthwhile because it is not only easy to use and access but it also help in easy integration of fonts, text and images into a sit’s design. You can create scalable logo & icon by using a unique vector graphics like SVG which is mainly based on XML format.

Author: Subarna Roy

Hello everybody !! I am Subarna. I am a designer. Web Design is not just my job it’s my passion. I love to play with color, shape, size & pattern. As a web designer, I am very well acquainted with all the parameters that work in making a website success. I design websites that are not only visually fantastic to look at, but also have the capability to complete a website as per as client requirement.

4 thoughts on “Represent Your Site Graphically by Incorporating SVG”

  1. Pingback: Mike Johnson
  2. Pingback: Brain
  3. Pingback: Thomas
  4. Pingback: Shelly

Leave a Reply

Copyright 2018 Sketch Web Solutions | Privacy Policy | Terms & Conditions