SVG Files: What They Are, How to Make One, and Why I Think You Should Use Them

Images. Designers know them, love them, can't get enough of ‘em. And we have JPEGs, PNGs, GIFs, and more, so why would we need another format? What’s an SVG, and why should you care?

Images are great at conveying messages, but not so great at changing sizes. If you've ever tried to add images to a website, you know that trying to scale up images often leads to blurry results. There’s no use in trying to add a clear, crisp image to your site if it looks low-quality and pixelated.

That's why I think every site owner should know about SVG files. SVG lets you serve images on your website that are lightweight, scalable, and visually delightful.

Despite these benefits, SVGs appear on only around 57% of websites, so let’s try to get that number higher. In this post, I’ll explain what you need to know about SVG files. You’ll learn how they work, why site owners use SVGs, and their pros and cons. Let’s dive in.

Table of Contents

• What is an SVG file?
• Raster Images vs. Vector Images
• How SVG Files Work
• How to Open an SVG File
• What are SVG files used for?
• Where to Get SVG Files
• Advantages of SVG Files
• Disadvantages of SVG Files
• How to Make or Edit an SVG File
• What is the best SVG software?

SVGs are something of a magic trick in website design. They’re programmable, usually smaller than other formats, and can even be animated and made interactive for visitors on your website.

Looking at the image above, we know that “graphic” means image and “scalable” means resizable. So, what exactly is a vector?

Raster Images vs. Vector Images

If we take all of the image file formats used on the internet today — PNGs, JPEGs, SVGs, GIFs, PDFs, TIFFs, etc. — we can divide these formats into two broad categories: raster graphics and vector graphics.

You're probably familiar with the most common image file formats, JPEG and PNG. These are examples of raster graphic formats, meaning they store image information in a grid of colored squares called a bitmap. The squares in the bitmap combine to form a coherent image.

Raster graphics are great for highly complex images like photographs because they can capture minute details pixel-by-pixel. However, they also have a fixed resolution, so increasing the size of a raster image lowers its quality.

Vector-graphic formats, like SVG, are different. These formats store images as a set of points and lines between points. Mathematical formulas determine the placement and shape of these points and lines, and maintain their relative distances as the image scales up or down.

Image Source

This makes the SVG format ideal for things like illustrations, infographics, icons, logos, interactive and animatable images, and even text. I’ll get more into what SVGs are used for in a bit

How SVG Files Work

SVG files are written in XML, a coding language used for storing and transferring digital information. If you’re familiar with HTML, the syntax looks similar to that language. The XML in an SVG file specifies all the shapes, colors, and text that make up the image.

Let’s see some examples. We’ll start with an SVG of a circle.

When I open the file for this circle in a code editor, this XML code appears:

As you can see, we only need one line of code to draw a circle. That’s because, instead of setting the color of each square in a grid, the XML only has to provide a color (where it says fill:#f4795b) and a radius (at the end where it says r=“20”).

When provided with an SVG file like this, a web browser (or other application) takes this XML and displays it onscreen as a vector image. All modern browsers and graphics editing software render SVGs this way.

You’ll also notice that this XML file is written in English, kind of. SVGs are text files, which makes them readable by humans, and we can change how a vector image looks by editing the XML directly. For instance, I could replace the fill value to change the color of the circle:

Of course, we can accomplish a lot more with vectors than just basic circles. Let’s look at a more complex image, the HubSpot sprocket logo:

Obviously, we’re looking at more than just a circle here. This graphic consists of 30 lines connected by 30 points:

Let’s open this SVG file in a text editor:

Image Source

There’s more going on here, but the concept is the same as the circle example above. We still see the color is set to orange inside the <style> tags. And this time, the code contains many yellow values that specify where each of those 30 points should go and how the lines should connect them.

SVGs can be used for more than just simple shapes and logos — you can make more complex illustrations with them, too. Here’s an SVG illustration of some buildings:

And here’s another even more elaborate example:

Image Source

In both examples, you can see how the art comprises dozens of smaller shapes that can be scaled up and down relative to each other. You can try downloading these files and opening them in a text editor yourself — the files will be much larger than our circle or even our HubSpot logo, but you can still see how XML draws each individual shape in the illustration.

In a nutshell, that’s how SVG files work. We don't need to get too deep into the math of it — just know that the XML is working behind the scenes to render a vector, and that all of the points and lines in the vector exist relative to each other in 2D space.

How to Open an SVG File

Most web browsers can display SVG files. To open a .svg file in your browser, you can simply drag the file into your browser window, and the vector image will be displayed.

Most image editing software will also let you view SVG files, and some programs, like Adobe Illustrator, are entirely dedicated to creating vector graphics. If you're looking for a good image editor for SVGs, I recommend Inkscape for a free option or Adobe Illustrator for a paid option.

Next, let’s look at how websites use SVGs in their designs.

What are SVG files used for?

Generally speaking, the SVG format works best for images that are less detailed than photographs. Here are some everyday use cases:

Icons

Most icons translate well to the SVG format, given their simple appearance and clearly defined shapes and borders. Plus, website icons must be responsive for different screen sizes, so they must be scalable without losing quality. For this reason, I recommend using exclusively SVGs for your website icons if you can.

Logos

SVGs work great for logos, which can appear on a website in the header or footer and in emails, not to mention being printed on anything from pamphlets to t-shirts to billboards. Again, logos are simple by design, which lends nicely to the SVG format.

Illustrations

Vectors also suit illustrations particularly well. Decorative webpage drawings can scale easily and conserve file space if added as SVGs. Here's an example from a real website:

Image Source

Animations and Interactive Elements

By harnessing JavaScript, you can set SVGs to change appearance dynamically. Animated SVGs can add visual flair to your pages, or you can use them to engage with user interface animations. Here’s another example:

Image Source

Infographics and Data Visualizations

Would your website benefit from informational displays, like an infographic or illustrated chart? That’s another application for SVGs. Your designs will scale seamlessly, and the text inside the SVG file is indexable by search engines, helping your SEO efforts.

You’ll also see SVGs implemented often on informational sites for interactive data visualizations and maps, like this example:

Image Source

You can even design charts as SVGs that update dynamically based on real-time data input. For instance, you could create a “progress bar” vector for a fundraiser that fills out as the donation total increases.

Where to Get SVG Files

You can make your own SVG files with a program like Adobe Illustrator. Alternatively, you can find SVG files online, which are available for download or purchase. Here are some SVG vendors we recommend:

1. Font Awesome

Best for: a huge variety of icons for most industries

Font Awesome has one of the largest selections of icons available on the web, many of which are available for free. However, signing up for a pro account gives you unlimited access to the entire icon library. Most Font Awesome icons also have several variants so you can fine-tune the look of your interface. If you need icons, this is the first place I recommend looking.

2. Icons8

Best for: consistent SVG icons in various styles

Icons8 is a comprehensive resource for finding and downloading SVG icons. It offers a wide range of high-quality and consistent icons in various styles and categories. With its user-friendly search, you can quickly find what you need. Icons8 offers free and premium subscription plans, ensuring options for various budgets.

3. Freepik

Best for: trendy SVG vectors and icons

Freepik is a well-known library of regularly updated SVG vectors and icons. It organizes all the images by categories, orientation, color, size, and license type to make users easily and quickly find the SVG files they’re looking for. They also continuously update their collections to match the latest design trends.

4. unDraw

Best for: completely free SVG images

unDraw offers free SVG illustrations for various projects, making it a go-to resource for designers and developers looking for high-quality images without copyright concerns. It also lets you customize the color of the illustrations to match your visual aesthetics.

Advantages of SVG Files

SVG is a powerful and practical format for websites and web apps — let’s explore the reasons why:

1. Infinite Scalability

It’s right there in the name: scalable. You can shrink or expand SVGs to any size without losing quality. Image size and display type don’t matter with SVGs — they always look the same.

Let’s look at the HubSpot sprocket again. Here’s the logo as an SVG, 100 pixels wide:

Here’s the same logo in PNG format, also 100 pixels wide:

They look indistinguishable now, but the difference in quality is evident when I scale each up to five times the size:

See the difference? If you want to expand or shrink an SVG file, the browser simply readjusts the points and lines to retain clear boundaries and solid colors.

Raster images, in contrast, are not designed for scaling and appear pixelated when blown up on a screen. While there are workarounds for this problem to keep the raster formula — like using multiple different-sized versions of the same image — this takes more work and is prone to errors.

This is important because the size of web images differs by viewer based on the browser window dimensions, device, zoom ratio, and site layout. For a good user experience, your images must appear fully rendered and clear for every viewer.

However, there’s a tradeoff to better scalability: SVGs lack the detail of raster images. You can only convey so much visual information from a vector system, but a raster format can display images as detailed as the bitmap allows. Any attempt to perfectly represent a detailed PNG (such as a photograph) as a vector will result in an impractically large SVG file. (But we’ll talk more about that later.)

Both file types have their place in web design. For photos, use PNGs, JPEGs, and other raster formats, and use SVGs for anything less detailed.

2. Smaller File Sizes

The file sizes for the SVG and PNG versions of our 100-pixel-wide logo image are both about 2 kilobytes, which is pretty small.

But, if we scale the image up to 2,000 pixels wide, we see a surprising contrast: The PNG file is not 72 KB, while the SVG version is still only 2 KB.

As long as your image isn’t too detailed, an SVG file will store an image more efficiently than any common raster format. SVG files contain enough information to display vectors at any scale, whereas larger bitmaps require larger files. The more pixels in an image, the more data is needed to store them.

Smaller image file sizes are good for websites because pages will load more quickly, making users less likely to bounce. Ultimately, using SVGs ensures your pages aren’t weighed down by images and won’t take too long to load.

3. Customization

SVGs are very editable with any vector editing software. Designers can easily modify the vector’s shape, size, colors, textures, and other visual effects like gradients, transparency, shadows, and blur.

Unlike with raster images, you don’t need to be a Photoshop whiz to make edits to SVGs — for most, vector editing has a smaller learning curve than raster image editing.

4. Scripting Compatibility

The World Wide Web Consortium developed the SVG file format as a standardized format for web graphics, designed to work with other web conventions like HTML, CSS, JavaScript, and the document object model.

Because of this compatibility, you can control SVG images with scripts. Scripts open the door for infinite dynamic display possibilities, from animations to interactive charts. This level of control over appearance isn’t possible with JPEG and PNG formats.

As a basic example, I’ll take the HubSpot sprocket logo SVG and apply a CSS animation to it, which makes the SVG change fill colors:

See the Pen SVG animation example by HubSpot (@hubspot) on CodePen.

5. Accessibility and Search Engine Optimization

SVG files are text files, offering some advantages over raster formats. First, as we’ve covered, developers can look at the XML code and quickly understand it.

Plus, if an SVG graphic contains text, the text information is stored in the file as literal text. This allows screen readers to interpret SVGs, helping those with difficulties interacting with digital content.

Lastly, search engines like Google can index SVG files. Include keyword text in the image if you want to place a text-heavy infographic or other SVG display on your page, as can help your page rank and improve your SEO. In this respect, PNGs and JPEGs are limited to metadata and alt text.

Disadvantages of SVG Files

While there are many great use cases for SVG images, it won’t be the best format for every image on your website. Here are some reasons why you may not choose to use an SVG file:

1. Poor for Highly Detailed Images

Infinite scalability does come with a catch, unfortunately. As mentioned, the SVG format is best suited for images with minimal detail, since a vector graphic is a collection of shapes put together. If you’re working with very detailed images, like photographs or highly detailed illustrations, raster formats are optimal.

You could technically try to recreate a photograph in an SVG format using a converter. Still, your final image won't look exactly like your photograph (more like a Monet painting), and the file size may be impractically large and slow your page load speed.

2. Coding Knowledge

As we‘ve seen, an SVG file is made up of XML code, and knowing how this code works can help when customizing and animating your SVG. If you’re not comfortable reading and writing code, you can still work with it using editing software.

… or, why not take this as an opportunity to learn how to code? Just a thought.

3. Security Concerns

SVGs can contain embedded scripts that execute in the browser. This makes them a potential vector for cross-site scripting, which is when an attacker manages to place some malicious code on your website. If you download an SVG from an untrustworthy source, it could contain a script that steals user data, crashes your site, or something else.

This isn't a reason to avoid SVGs altogether, though. When you use SVGs, download them from a trustworthy source like the ones listed above or create them yourself, which we’ll discuss next.

To get started creating SVGs from scratch, you don’t need to know anything about XML or programming. You can draw your image in one of the programs listed above and export it as an SVG.

Here, we'll be going over how to create an SVG file in Adobe Illustrator, which is the industry standard software for working with vector graphics. However, the process is likely similar for other programs if you prefer an alternative.

[website optimization checklist here]

1. Draw a vector on your artboard.

Illustrator has several kinds of drawing tools to create your vector graphic. If you're just starting out, I recommend using the line segment tool to sketch out a basic design.

Alternatively, Illustrator has a very cool feature that allows you to upload a raster image and convert it to a vector. Upload the image to your Illustrator project and select Image Trace, then Expand. When done, select Outline View to clarify the design’s borders and the number of nodes present.

2. Fine-tune your design.

From there, you can refine the vector to make it look cleaner, like smoothing out edges with the Smooth tool and deleting excess points (which Illustrator calls “nodes”) and lines (“paths”) with the Simplify tool.

Designers will often create more than one design on a single artboard. If this is typical for you, you'll want to separate your new design from any others you may have present on the artboard. To do this, use the Magic Wand tool, then click the Group Selection tool.

Note that, at this point, the image is not technically an SVG yet — it's a vector graphic inside of an Adobe Illustrator (.ai) file and needs to be converted to SVG. That’s next.

3. Export your file as an SVG.

Select your design, click File > Export > Export As SVG (*.SVG). You can leave the export options as their defaults for now.

4. Add the SVG to your website.

Once your SVG file is exported, you have a few ways to add it to your website or web page.

If you're working in a CMS or a website builder, You can add an SVG to a page the same way you would add any other image after uploading it to the file manager.

If you're building a page with HTML, here are your options:

Inline SVG: This involves embedding the SVG code directly into your HTML. It gives you the most control over the SVG’s behavior, and style, allowing you to manipulate its color and other properties with CSS and JavaScript. Open the SVG file in a text editor, copy the code, then paste the code into your HTML document.

See the Pen svg - inline example by HubSpot (@hubspot) on CodePen.

<img> tag: You can also add an SVG to your page by putting it inside an <img> tag. This limits how you can manipulate the SVG with CSS and JavaScript, but it makes for cleaner HTML.

See the Pen svg - img example by HubSpot (@hubspot) on CodePen.

<iframe> tag: In some cases, you may want to use an iframe to embed an SVG. This is a safe way to embed SVGs from a third party while protecting your website from cross-site scripting. Iframes may also be preferable for complex SVGs with embedded scripts to avoid conflicts with any parent scripts on your website.

See the Pen svg - iframe example by HubSpot (@hubspot) on CodePen.

What is the best SVG software?

You could directly modify any SVG file in a text editor, but this is impractical for changing most things beyond colors. Instead, use software for editing vector art.

Each program has its own limitations and learning curve. If you plan to explore SVGs further, try out a few options and get a feel for the tools available before settling on a free or paid option.

1. Sketch

Best for: Small Businesses

Platforms: Mac OS X, Linux, and Windows

Sketch is an easy-to-use digital design platform that includes a useful vector editor. Users of this popular platform include UI and UX mobile apps and web designers. This platform also has a range of collaboration tools for quick feedback and editing. There's even an iPhone and iPad app for previewing so you can work from anywhere.

2. Figma

Best for: Collaborative Remote Teams

Platform: Online

Figma is a powerful design and collaboration platform that also has SVG export options. It's popular for many reasons including ease of use, and quick animating and prototyping options.

It also offers online tools that are useful for remote teams.

3. Adobe Illustrator

Best for: Creative professionals

Platforms: Windows and Mac

Adobe’s program for creating and editing vector graphics. You can export Adobe projects as SVGs or in several raster formats. The image trace tool is especially handy if you plan to trace photographs and logos to create vector graphics regularly.

A quick note: Photoshop is also an option for SVG creation. That said, this tool is a raster graphics editor. This tool offers basic vector tools, but you may prefer a more advanced vector graphics editor when creating SVG files.

Free Software to Make SVG Files

1. Inkscape

Best for: Easy Setup

Platforms: Mac OS, Linux, and Windows

This free and open-source vector graphics editor is great for illustrations, logos, diagrams, and web graphics. If you're still learning the code behind SVG files, their site also offers clear documentation that can help you as you learn.

2. Vectornator

Best for: Feature-Rich Vector Creation

Platforms: iPhone, iPad, and Mac

This free tool is vector-based, which makes it helpful in creating SVG illustrations. Its features support Boolean operations. These make it easier to combine shapes. It also has options for masking and auto-trace.

3. Vecteezy Editor

Best for: Editable Vector Templates

Platform: Online

This web-based SVG editing software makes it easy to create graphics with a vast library of templates and graphics. It also has user-friendly tools for creating original vector graphics in your browser.

4. macSVG

Best for: Beginners

Platforms: iOS, Android, macOS, Windows, and Linux

This open-source software helps designers create SVGs for web pages, mobile apps, and more. Licensed by MIT, this tool makes it easy for users to start creating and editing SVG files.

If you’re still looking for the perfect vector graphics software for your project, check out this list of Illustrator alternatives.

Other popular options include:

• Microsoft Visio is a flowchart, diagram, and infographic maker.
• CorelDRAW is another dedicated vector graphic editor.
• Google Docs lets you export drawings created in Google Docs to SVG.

Designing for Scale

Scalable vector graphics are handy in many different scenarios. They’re versatile, interactive, and easy to start creating with a graphics editor and a bit of design know-how. With SVGs in your web design tool belt, you won’t need to worry about blurry graphics again.

Editor's note: This post was originally published in October 2020, and has been updated for comprehensiveness.