Categories
#SVG Web development

SVG vs PNG/ How to add SVG to HTML?/ FAQ SVG

Most of us know that when building stuff for the website, optimizing HTML, CSS, JavaScript or whatever else is good — but if you don’t optimize images, all other efforts will be in vain, and your website won’t look good.

SVG Introduction

If you follow my blog, for sure you noticed that in many tutorials I am using images in .png format, however, there is also a different image format that works well with the web page – SVG .

Why am I choosing PNGs and SVGs?

These formats support transparency, which does not support .jpg.

SVG and PNG both are a type of image format to store images. so…what’s the difference between a PNG and SVG

PNG (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of  pixels [or building blocks] that form a complete image. 

The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats. 

A SVG (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size.

Example:

Images with height=”142″ width=”142″, and after resizing to height=”842″ width=”842″:
PNG is fussy if the pixel density is not high enough. SVG format, can be scaled to any size without losing quality.
On the left side an image in .png format, on the right side .svg.

Of course, as usual, it depends on you, which format you prefer, however, always you can try using another one, and have a look at how it works with your web page.

If the sample above convinced you to try to use SVG let’s go further!

For sure you have lots of questions now! Here are some answers on the most frequent one:

FAQ SVG:

From where I can get SVG files?

You can find some free stocks of SVG images on Internet, or you can create them by yourself.

In which program I can create an SVG file?

Personally I am using Adobe Illustrator, but if you don’t want to pay for the software you can use a free program like Inkscape to create SVG files.

How to create an SVG file in Adobe Illustrator?

Create your image in Adobe Illustrator.

Tip: try to always give a name to the layer, you can easily later make any changes in SVG code (more about SVG code you will find below).

Go to File->Export->Export As… and choose format SVG.

by pressing the option Show Code you can see the code of your SVG (or you can open it in any HTML editor later):

How to add SVG to HTML?

You can do as I did in the example above, by using <img> element:

or copy the SVG code directly into HTML. You can read more about HTML SVG also here.

How to paste SVG code into HTML?

If you don’t want to do any changes with your image you can easily choose the first method (by <img> tag )to add your SVG file, but if you want to animate your image with CSS, or JavaScript you should go for method two:

Let’s take a look on code first:

You do not need to be afraid of these numbers, you don’t need them for now.

*the HTML <svg>element is a container for SVG graphics.
*and this part is nothing other than CSS.
*SVG code pasted and opened in Adobe Dreamweaver CC editor (you can use any HTML editor to edit the code!).

How to animate SVG?

To animate SVG you can use CSS, or JavaScript. Let’s try to animate our dot with CSS:

Example:

To our green dot I added the animation – Jelly, and @keyframes:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	<style>.cls-1{fill:#009640;}
		.cls-2{fill:#2fac66;}
		.cls-3{fill:#fff;}
	    	.cls-4{fill:#1d1d1b;}
		
		svg {
             width: 100%;
             max-width: 300px;
	     padding: 50px;
	     animation: jelly 0.5s infinite;
			}
  
			@keyframes jelly {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
}
	</style>
</head>

<body>
	<svg id="ball" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.18 126.18"><defs>
		</defs><title>ball</title><circle class="cls-1" cx="63.09" cy="63.09" r="63.09"/><circle class="cls-2" cx="60.97" cy="61.97" r="59.97"/><circle class="cls-3" cx="44.79" cy="49.74" r="15.18"/><circle class="cls-3" cx="80.92" cy="49.74" r="15.18"/><circle class="cls-4" cx="83.77" cy="55.5" r="9.42"/><circle class="cls-4" cx="47.12" cy="55.5" r="9.42"/><path class="cls-4" d="M234.32,209.25c0,13.43-11.93,24.31-26.65,24.31S181,222.68,181,209.25" transform="translate(-145.58 -137.79)"/></svg>
</body>
</html>

Output:

This SVG only has one layer, if you have an image with more layers you can animate and style each layer separately.

To see the live example go to lenastanley.com.

Hope this helps 🙂

Enjoy coding!

Leave a Reply