What is SVG?

The SVG format has actually been around since the 1990s, but it has been somewhat ignored as a file format and not well supported. In the last few years, most modern web browsers have been rendering SVG files without any problems, with vector drawing programs offering the user to export to SVG.

JPG and PNG are commonly used for photographs and larger images, though you may be surprised to learn that SVG is the one format that ticks most of the boxes for web development demands; responsiveness, scalability, performance, accessibility, etc.

When considering how to design a user-friendly website, web designers and developers often face difficulties with images, especially when images need to be resized to fit certain aspects of a design.

Image quality is essential, but so is size. However, you wouldn’t sacrifice quality in replacement of size if it meant your website had a distorted or pixelated image. So how do you combat both quality and size without dropping one or the other?

Responsive design means that your website will work well regardless of where your visitors are coming from; tablet, mobile, desktop, etc. This means your images will need to be optimized for each and every device.

Thankfully SVG makes images look great, regardless of their size. SVGs are somewhat of a white rabbit in terms of web design, offering clean and crisp graphics at any scale, and an SEO-friendly format.

What Is SVG?

SVG is an XML based vector graphic format. Extensible Markup Language (XML) is similar to HTML, if not a little stricter.

If you wanted to draw a white circle with a black border using SVG code, this is what it would look like:

<circle cx=”100″ cy=”100″ r=”50″ stroke-width=”4″ stroke=”#000″ fill=”#fff” />

SVG is a simple plain text file that describes shapes, colors, etc, and can be read by developers and programmers (or anyone that knows basic code). Unlike JPG and PNG, SVG code can be modified to offer greater flexibility.

Raster Vs Vector

There is quite a range of image files available and in use today. Generally speaking, these can be categorized into raster graphics and vector graphics.

PNG and JPG are raster graphics; they store image information and data in a grid of colored squares which you may refer to as bitmap. The squares combine with each other to produce an image that the eye can understand, very similar to pixels.

Raster graphics are often used for detailed images and photographs, where colors are specific and complex. Raster graphics have a fixed resolution, so when you resize a PNG or JPG, you’ll notice the quality of the image alters as you increase or decrease the size.

Vector formats like SVG and PDF store image information as a set of lines between points. As we’ve seen in the SVG code earlier, vector images are a bit of a mathematical formula that tells us the placement and shape of the points and lines. This is why SVG images can be resized without becoming distorted.

Scalability

SVG allows you to combine different shapes, paths, and text elements. Ultimately, you can create any visual you like, and you’re guaranteed they will look clear and sharp at any size.

SVG is indefinitely scalable whereas JPG, PNG, and GIF have fixed dimensions. When you enlarge one of these types of images, you’ll notice pixelation. Whilst responsive technology makes things a little easier to swallow, the other file formats have nothing in comparison to SVG.

 JPGGIFPNGSVG
Vector   
Raster 
Transparency  
Animation 
Lossy   

What Are SVG Files Used For?

SVG files are more suited to images that contain less detail in comparison to a photograph. However, that doesn’t narrow the criteria down very much.

Here are a few examples of the most common uses for SVGs:

1.       Icons: Icons tend to work well as vectors as they are often simple. Icons are great for website buttons and therefore must be scalable, so SVG icons tick all of the boxes.

2.       Logos: Logos appear in website headers, on emails, and can be printed on paper, clothes, and lots more. In comparison to a photograph or complex image, logos tend to be simple which means they are well suited to SVG format.

3.       Illustrations: Illustrations are essentially non-photo art. Drawings can be scaled in SVG format to suit a range of purposes including for websites, as prints, and more.

Advantages of SVG Files

  • SVGs can be increased or decreased in size without losing image quality. It doesn’t matter what size an SVG image is, it will always look the same, just larger or smaller. As we discussed earlier, the SVG format is great for web images because images can change on different devices. Someone who views an image on a website on an iPhone is going to see something different from someone viewing it on a desktop PC. However, SVG eliminates the possibility that the image will be distorted. When SVG needs to be made bigger or smaller, the file readjusts the points and lines to ensure clear boundaries and solid colors remain. If we were to do the same with a raster image like a PNG, the image would appear pixelated. When raster images were designed, they weren’t built for scaling, which is why SVGs are an infinitely scalable image format.
  • SVGs offer designers and developers a lot more control. Instead of having to modify files and code in a text editor, there are plenty of programs which allow you to change vector shapes, colors, and even text, without direct coding.
  • SVGs can be controlled with scripts meaning there are plenty of possibilities to explore. SVG was developed by the World Wide Web Consortium, making it a standardized format for web graphics. SVG format interacts well with other conventions like HTML, CSS, and JavaScript.
  •  SVG files can be indexed by Google, making them a very SEO-friendly file format. If you want to display an SVG image on your website, or a text-based infographic, you can include keywords in the image which can improve your website’s SEO. In contrast, JPG and PNG images can only offer alt text and metadata, so are less SEO-friendly.

How To Open an SVG File

SVG files can be viewed by opening them in a web browser. Web browsers are designed to interpret and display SVGs, or you can preview them using specialist programs which are outlined below. You may have noticed if you’re browsing Google Images or trying to save an SVG format how you open it without a web page immediately opening.

There are plenty of ways you can modify or edit an SVG file. You can do this directly in a text editor, but beyond changing colors, this is quite impractical.

  • Adobe Illustrator
  • CorelDRAW
  • Microsoft Visio
  • Google Docs
  • GIMP
  • Inkscape

If you want to draw an image and convert it to SVG format, you don’t need to know anything about coding, programming, or XML. Simply use one of the programs above and save your image as an SVG.

Of course, each program offers different plans, pricing, features, and learning curves. Most software programs include a free trial, so I would recommend signing up for each one of them if a free trial is available, to find the one that best suits your needs.

Conclusion

Vector graphics are scalable and therefore come in handy across many scenarios. SVGs are versatile, SEO-friendly, and don’t need to be complicated if you don’t want them to be. Whether you’re a web designer, developer, or artist, you can use SVGs for graphics, icons, illustrations, and lots more.