Scalable Vector Graphic (SVG) is a two-dimensional vector image format used mainly on the web. You can create SVGs using the Extensible Markup Language (XML) markup style. SVG creation and usage might seem daunting and confusing at first; however, it’s an excellent tool for the front-end developer to have in his arsenal if adequately understood.
Understanding Vector Graphics
Generally, there are two types of graphics/images in digital design– bitmap/raster graphics and vector/object-oriented graphics.
First, bitmap graphics consists of rows of tiny dots called pixels that combine to form an image. Each pixel usually has a single color, and high-quality images can have millions of pixels. Because the default output of devices like cameras and scanners are usually in bitmap formats, they are more popular than vector graphics; examples are. JPEG, PNG, BMP, and GIF.
On the other hand, vector graphics use mathematical formulae to describe colors, shapes, and placement. Every vector graphic comprises lines, curves, shapes, and text; within the graphic are instructions on where each component should be to make the picture. Vector graphic formats include PICT, EPS, CDR, SVG, and TTF.
A significant difference between vector and raster images is their output; the pixels that make up a bitmap image do not fare well with extreme changes in scale. For example, when you magnify the image excessively, the squares that make up each pixel become apparent. On the other hand, Vector images are not affected by changes in scale as their shapes adjust to fit the new resolution.
Advantages Of Using SVG
1. Easy To Edit And Customize
It can be very frustrating trying to look for an exact image that’s what you want. You can create custom SVG images from scratch, so you don’t need to go through that hassle anymore. Also, you can easily make any adjustments you want on an SVG file as you can edit every aspect of it.
2. Lightweight Files That Don’t Suffer Quality Loss
SVG files are usually very light compared to bitmap images. While you can also get tiny bitmap images, those small files won’t be able to take much stretching before looking distorted. On the other hand, you can stretch a lightweight SVG file to fit any resolution you desire.
3. SVG Files Can Be Easily Compressed
You can use algorithms to perform lossless compressions on SVGs to reduce their file sizes further. While you can also compress other image types, it’s harder to compress them than to compress an SVG file, and you probably won’t get the exact extent of compression without losing the image quality.
4. No HTTP Requests
When you place a bitmap graphic on your webpage, the client needs to go through a GET request-response cycle to load up that content. However, using SVG files inline or internally in your HTML file eliminates the need for an HTTP request since it is a part of the HTML file. This reduction in requests can increase the load speed of your webpage.
5. SVG Files Can Be Animated
SVG files give you the flexibility of being able to animate the objects you create. You can achieve this animation effect using CSS, the Web Animations API in JavaScript, or the SVG <animate> tag.
How To Create An SVG File
1. Writing SVG Markup
First, you can create an SVG file by writing the SVG file markup yourself. This method is the most straightforward, but relatively, it’s the most complicated as it involves you learning how to use each of the tags. It can also be time-consuming to use this means.
2. Using Vector Design Software
You can create SVG files using vector design software like Adobe Illustrator, CorelDraw, and Microsoft Visio. This type of software gives you the flexibility to create what you want without writing a line of code; you do most of the work using a mouse. After creating the design you want, you only need to export or save it as an SVG file.
3. Converting Bitmap To SVG
Finally, you can convert a bitmap file (such as JPEG, PNG, or BMP) into an SVG file. You can find most of these converters online for free; some examples are FreeConvert and Convertio. The issue with using these converters is that if your image is complicated, it will lose its clarity and detail as a result of the conversion.
How To Input SVG Into A Webpage
There are three ways you can input an SVG file into your HTML code– inline, internally, and externally. I use the SVG code for all three illustrations from this Wikimedia Commons page.
1. Inline
First, you can use SVG markup inline as you would do with regular tags in your HTML document. This is done by creating an svg tag in which you specify how you want the elements in the SVG to look. An example of how that works inline SVG works is as follows:
<!DOCTYPE html>
<html>
<body>
<h1>Using Inline SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg>
</body>
</html>
2. Internal
The issue with using inline SVG is that it can make your code messy and hard to understand, especially on more extensive drawings. You can use internal SVG to make things more organized.
To use internal SVG, you need to wrap all the contents of the svg markup in a symbol tag that should have a custom-named id. You can choose to put this markup at the bottom of your HTML body, so it doesn’t mess with the flow of things in the HTML proper.
Next, you should call the markup by creating a use tag inside the svg element. The use element should have an href that points to the id of the symbol tag you created below. Also, for compatibility with older browsers, you need to add an xlink-href that points to the same id. An illustration of how that works is seen below:
<!DOCTYPE html>
<html>
<body>
<h1>Using Internal SVG</h1>
<svg>
<use href="#two-rectangles" xlink-href="#two-rectangles"></use>
</svg>
<p>Etiam volutpat commodo massa at semper. Donec tempor massa in eros mollis, et pellentesque sapien.</p>
<svg xmlns="http://www.w3.org/2000/svg"
width="467" height="462">
<symbol id="two-rectangles">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</symbol>
</svg>
</body>
</html>
3. External
To make your HTML code cleaner, you can link to an external SVG file. You need to create an SVG file, then create an img tag with the svg file as the source.
As an illustration, first create an empty file, put your SVG markup in there and save it with a .svg file extension. In the example below, this is the content of a file named two-rectangles.svg:
<svg xmlns="http://www.w3.org/2000/svg"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg>
After creating the file above, you need to link it in your HTML file:
<!DOCTYPE html>
<html>
<body>
<h1>Using External SVG</h1>
<img src="two-rectangles" alt="an svg of two rectangles”>
</body>
</html>