What is an SVG file?

If you’re creating content on the web, you’ll likely come across a range of different file types. But which one is best? In this short series from Shorthand, we’re going deep on some of the most popular file types, so you can talk a little more confidently to your designer, developer, or team.

SVG files are Scalable Vector Graphics files. They are used to create and edit vector images.

Unlike bitmap images, which are made up of a fixed number of pixels, vector images are composed of mathematical formulas that define the shapes and colours in the image. This makes them scalable, so that hey can be enlarged or reduced without losing quality. Files in the SVG format are often used for logos, icons, and illustrations.

That’s the potted summary! But now, let's dive into the detail. Feel free to skim down to find an answer to all your SVG questions.

In this post, we’ll cover:

• A more detailed definition on the SVG format
• A short history of the SVG, so you can impress your colleagues
• The benefits of SVGs
• The cons of SVGs
• How to open an SVG
• How to create and edit an SVG
• The difference between SVGs, PNGs, and JPEGs
• The difference between SVG and EPS files

Create interactive content for free with Shorthand.

Prepare stunning, interactive web content for free. No code required.
Get started.

If you've ever opened an image file, chances are it was in one of two formats: JPEG or PNG. These are the most popular image formats on the web. But there's another format that's becoming increasingly popular, especially for vector images: SVG.

SVG stands for Scalable Vector Graphics. Unlike JPEG, PNG, and GIF files, which are made up of pixels, SVG files are made up of vector graphics. That means they can be scaled to any size without losing quality. They're also usually smaller in file size than pixel-based images.

To get slightly more technical, SVG files are XML files, which means they contain markup tags that define the image. This makes them easy to edit and customise. You can open an SVG file in a text editor and change any of the markup tags to change the image. For example, you can change the colour of an SVG image simply by changing the colour attribute in the markup tag.

SVG files have been around since 1999, but they're only now gaining widespread popularity. That's because modern web browsers have finally started to support them natively. (In the past, you needed a plugin like Adobe Flash or Microsoft Silverlight to view SVG files).

SVG files are most commonly used for logos, icons, and illustrations. They're well-suited for these types of images because they can be scaled to any size without losing quality. This makes them perfect for use on the web, where images need to be resized frequently.

SVG files are also becoming more popular for use in email marketing and advertising. That's because they can be scaled down to small sizes without losing quality, which is important for email images.

Learn more about vector images.

There are many benefits of using SVG files:

1. They're resolution independent. That means they can be scaled to any size without losing quality. This makes them perfect for use on the web, where images need to be resized frequently.
   
2. They're smaller. SVG files are often smaller in file size than raster graphics. That's because they're made up of vector graphics, which are composed of mathematical equations rather than pixels. This makes them much smaller in file size than raster graphics, which are made up of a series of pixels. This makes SVG files ideal for use on the web, where file size is important for loading times.
   
3. They can be animated. SVG files can be used to create animations using CSS or JavaScript. This makes them perfect for use in interactive applications or websites.
   
4. They're easy to create and edit. You can create SVG files using a vector editing program like Adobe Illustrator. And there are many other online tools that can be used to edit SVG files (we mention a few of them, below).
   
5. They can be edited in a text editor. Because SVG files are produced in a text-based markup language similar to HTML, they an be edited using a text editor. Note: If you don't know what you're doing, you could damage the file. It's best to use a vector editing program like Adobe Illustrator to edit SVG files.
   
6. They're supported by all major browsers. SVG files are now supported by all major browsers, including Edge, Firefox, Safari, and Chrome.

There are a few potential drawbacks to using SVG files:

1. SVG files are not supported by older browsers. While most modern browsers support SVG files, some older browsers do not. If you're targeting a large audience, it's important to make sure your SVG files are compatible with all of the browsers they might be using.
   
2. They can be more complex than other image formats. SVGs are more complex than other image formats like JPEG and PNG, which can make them more difficult to work with, depending on your skill level and experience.
   
3. They're not always the best choice for photos. While SVG files are great for logos, icons, and illustrations, they're not necessarily the best choice for photos. That's because photos are made up of a lot of pixels. As mentioned above, SVG files are better suited for vector graphics.
   
4. They don't always look great at small sizes (although this is improving). This can be a problem if you need to use an SVG image in an email or on a website with a small screen. However, there are ways to work around this. One is to use a tool like svg2png, which converts SVG files to PNG format. This can be helpful if you need to use an SVG file in a situation where it's not supported. Another solution is to create multiple versions of your SVG image at different sizes. This way, you can choose the size that looks best for each situation.

If you're using a modern browser, you can open an SVG file just like any other image file. Just drag and drop the file into your browser, or click on the file to open it.

SVG files can be opened in most vector graphic editors and design apps, such as Adobe Illustrator, Adobe Photoshop, Inkscape, or Affinity Designer. They can also be opened in text editors, such as Atom or Notepad++.

If you're using an older browser, you'll need to install a plugin like Adobe Flash or Microsoft Silverlight to view SVG files.

Creating and editing SVG files is a bit more complex than working with raster graphics. That's because you need to use vector-based apps like Adobe Illustrator, Inkscape, CorelDRAW, GIMP, or Sketch.

If you're not familiar with vector-based software, it can be tricky to get started. But once you get the hang of it, it's actually quite easy to use.

There are also a few online tools that you can use to create and edit SVG files, such as Method Draw, Vectr, and Figma.

The two most common image formats on the web are JPEG (or JPG) and PNG. Both of these formats are raster graphics or raster images, which means they're made up of pixels.

This makes them ideal for photos, as they will always look sharp and clear no matter what size they are. However, raster graphics can only be scaled a certain amount before they start to lose quality.

This means that if you need to use an image at a different size than what it was originally created for, it might not look as good.

SVG files are vector graphics, which means they're made up of vectors. This makes them ideal for logos, icons, and illustrations. SVG graphics can be scaled to any size without losing quality, while raster files will become blurry and pixelated if they're scaled too large.

There is a big difference between SVG and EPS files.

EPS files are binary files, while SVG files are XML files. This means that you can't edit an EPS file with a text editor.

Another difference is that EPS files are designed for print, while SVG files are designed for the web. This means that EPS files will usually be much larger in file size than SVG files.

SVG files are a great way to share vector graphics online. They're easy to create and edit, and they're supported by all major browsers. If you need to use an image on a website or in an email, and you want it to look its best, try using an SVG file. You might be surprised at how much difference it makes.