SVG Icon – Everything you need to know!

SVG icon is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. You can create one image and scale it to a plethora of different size for retina devices, 2x retina devices, or even small screen like older Blackberry’s.

One thing to remember is that SVG is a vector format so you cannot use it for photos. You will have to use some other techniques for all your beautiful full screen photos.

Here are few of the major benefits of SVG’s

• SVG images are actually written in xml. This means you can manipulate images directly in your code editor (that is, if you take the time to learn the language) This gives you ton of power to do complex manipulation and animation that are not possible with standard raster- based images.
• SVG images are accessible with client – side scripts. This mean you can manipulate certain parts of the images with Java script.
• SVG’s are polychromatic, so you can have multiple colors in your design. This is where SVG’s really shine over icon fonts.

Video Tutorial – How to Create SVG Icons

In below video tutorial, you can learn how to create SVG icons or SVG images in Adobe Illustrator software. Please subscribe the video owner for more videos like this. Check below;

How to use use SVG files

There are different ways you can work with SVGs, depending on the use case:

1. Inline SVG: This is where you take the content of the SVG file and include it directly in your markup. This method is straightforward, and lets you directly target each shape within the SVG with CSS.
2. SVG Sprites: If I will be using a set of icons across multiple pages, I instead use an SVG sprite. This method work allows you to include an SVG by referencing its ID, and makes it easy to change an icon and have those changes reflected instantly across a site ( So long as the ID remain the same).

How to use an Inline SVG

Open the SVG file in your text editor of choice, and then literally copy and paste the content from the file into your markup.

<svg>...</svg>

How to create an SVG Sprite

Includes an SVG sprite generator. Simply drop all your SVG file in to the SVG folder, run my build and it generates a sprite for me. Super easy to add and remove icon. However, this approach require comfort working with command line, and if you are not there IcoMoon, the fantastic icon font generator, also now lets you easily create SVG sprites.

How to use an SVG Sprite

Add the contents of your sprite to the markup in a hidden computer.

<div hidden>
<svg>………</svg>
</div>

Looking more SVG icon?

You are always welcome! In Similar Icons database, we share hundread of free SVG icon for our dear followers. If you don’t know how to create SVG icons, just check our collections then download and use on your personal or commercial projects.