INTRODUCTION

The web is a visual playground, and as designers, we strive to create experiences that are both beautiful and efficient. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web -- SVGs (Scalable Vector Graphics ), the superheroes of web graphics!  They boast impressively small file sizes, keeping your website lean and lightning fast. Plus, their code-based nature allows for easy editing and animation, opening doors for dynamic and engaging experiences.

This guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.

# SVG

SVGs are XML-based graphics that define images using geometric shapes, paths, colors, and text. This makes them incredibly versatile and allows for complex illustrations while maintaining a small file size. Here’s a simple example of an SVG circle:

This code creates a red circle with a radius of 40 pixels centered at (50, 50) within a 100×100 SVG canvas.

Advantage of SVG

When to use SVG vs. other image formats

There are 4 common image file format (PNG, JPEG, WebP, SVG) used on the web, and while SVGs have many benefits, they’re not the best choice for all use cases. SVG files are great for simple graphics and illustrations, but they’re not ideal for highly detailed images. If you’re designing a website for a professional photographer, you’re not going to want to upload portfolios in SVG format.

For highly detailed photographs or intricate images, you’ll probably want to go with PNG, JPG, or JPEG files. When it comes to animations, GIFs and SVGs are awesome. It’s also relatively simple to include a transparent background in SVG, PNG, and GIF files. 

What programs can open and edit SVG files?

There are lots of free and paid programs you can use to open, edit, and convert SVG files.
Here are just a few:

Free SVG file converters, design, and animation software

• Inkscape
• SVG-Edit
• Vectr
• Animator
• GIMP

Paid software that supports vector files

• Adobe Photoshop
• CorelDRAW
• SVGator
• Adobe Illustrator

# Create Simple Shapes

Simple shape elements (<line>, <circle>, <rect>, <ellipse>, <polygon> and <polyline>) are there for many reasons, and one of these reasons is that they are more readable and more maintainable and editable by hand than their <path> alternatives.

Basic shapes come with a set of attributes that allow you to control the shape features, such as position (x, y, cx, cy) and dimensions (width & height), while paths don’t come with these attributes.

For example, the following snippet shows the difference between a circle created and exported as a simple shape, versus one created and exported as a path:

<circle fill="#red"
        stroke="#000"
        cx="20"
        cy="20"
        r="30"/>

<!-- versus -->

<path fill="#FFFFFF"
      stroke="#000"
      d="M55.7,28.1
         c0,15.2-12.4,27.6-27.6,27.6
         S0.5,43.3,0.5,28.1
	     S12.9,0.5,28.1,0.5
	     S55.7,12.9,55.7,28.1z"/>

If you want to animate your shape by, moving the position of the circle or making it bigger, you can do that by animating the position of the center via the x and y coordinates (cx & cy) and the radius of the circle (r). Whereas if you are working with a circle generated as a path, you will have to resort to CSS/SVG transformations (translation and scaling) to do that.

Another advantage to using simple shapes is that, in the majority of cases, the code required to create a shape using simple shape elements is less than that required to create the same shape using an <path> element.

# Convert Text to Outlines

1. Select the text you want to convert.
2. Choose Type → Create Outlines

# Simplify Paths

1. Select the path
2. Go to Object → Path → Simplify
3. Tweak the number of points. Make sure you have the Preview checked so can see how the path changes as you change the number of points. Tweak the number to get to the minimum number of points while preserving (or sacrificing) as much of the path’s visual appearance as you need.

Choose The Best Suitable Export Options for the Web.

• Choose File → Save As

• Choose SVG from the dropdown menu

• Click Save.
  
  Once you click save, a dialog will show up that contains a set of options that you can customize, and that will affect the generated SVG code:

Since Adobe Illustrator 2015.2 (released November 2015), a dedicated SVG Export workflow (File > Export > SVG) has been available for exporting web-optimized SVG files for your web and screen design projects.

The Image Location option specifies whether any raster images will be embedded inline in your SVG or will be external with a link inside the SVG. This, again, depends on what you need. Inlining images inside the SVG can increase its file size dramatically. Last time a designer sent me an SVG with an image inlined in it, the file size was more than 1MB! After removing that image (which was caused by the Photoshop Effects used, that we mentioned earlier), the file size dropped to less than 100KB! So, choose wisely.

The CSS Properties option gives you the option to choose how you want the styles inside the SVG to be created: using presentation attributes, inline styles, or in a <style> tag. This is also a matter of preference and depends on how you intend to manipulate the SVG once you’ve embedded it. If you’re not the one who’s going to do that, make sure you consult with the developer to choose the option that suits their needs best.

The less the number of Decimal Places, the less the file size of the SVG. One decimal place should generally be enough, so I’d go with that.

Note that if you choose 3 or 4 decimal places, for example, and then use an optimization tool to optimize the SVG and bring that number down back to 1, the SVG might end up visually broken; so it is best to choose this option early on.

# Implementation of SVG

There are many ways to use SVG on the web. Some of them have benefits which can be useful depending on what you would like to achieve and some of them are best to be avoided. 

Img

<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">

Background-image

.logo {
  background-image: url(bblogo.svg);
}

Iframe

<iframe src="bblogo.svg">Your browser does not support iframes</iframe>

Embed

<embed type="image/svg+xml" src="bblogo.svg" />

Object

<object type="image/svg+xml" data="bblogo.svg">Your browser does not support SVGs</object>

Inline

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

# SVG Sprite Creation techniques

SVG Sprites are a clever technique that combines multiple SVG icons into a single SVG file. This offers a significant advantage for websites that rely heavily on icons.
An Overview of SVG Sprite Creation Techniques

Conclusion

Scalable Vector Graphics (SVGs) have emerged as a powerful and versatile tool for modern web development, offering a unique combination of advantages over traditional raster images.

Key points at a glance:

1. Scalability
2. Accessibility
3. Versatility
4. Efficiency
5. Integration

In conclusion, SVGs transcend being an alternative, becoming a pivotal element in crafting modern web experiences that prioritize not only visual excellence but also inclusivity, performance, and adaptability. As web technologies evolve, SVGs are poised to take centre stage in shaping the future of the web.