An SVG file can offer powerful graphics at any scale, speed up your website, and improve SEO. With those potential outcomes, why are only 53% of websites using SVG files? The truth is, image optimization online isn't easy. Quality image resolution, responsive design, and animation can improve any website. But if they're not done right, they can have devastating effects on user experience and site speed. SVGs are something of a magic trick in website design. They generate crisp graphics at any scale, but they’re also optimized for search engines. SVG files are programmable, often smaller than other formats, and capable of dynamic animations. There’s a lot you can do with your website once you learn about SVG files. Keep reading this quick guide to the powerful SVG file or click one of the links below to jump ahead: An SVG file, short for scalable vector graphic file, is a standard graphics file type used for rendering two-dimensional images on the internet. Scalable vector graphic files are a web-friendly format that stores images as vectors. This prompts the question: What exactly is a vector graphic? There are more than a few image file formats in use on the web today, which we can divide into two categories: raster graphics and vector graphics. You’re probably familiar with the common formats PNG and JPEG. These are raster-graphics formats, which means that they store image information in a grid of colored squares, also called a bitmap. The squares in this bitmap combine to form a coherent image, much like pixels on a computer screen. Raster graphics work well for highly detailed images like photographs, where each pixel has a specified and exact color. Raster images have a fixed resolution, so increasing their size lowers the quality of the image. Vector-graphic formats — like SVG and PDF — work differently. These formats store images as a set of points and lines between points. Mathematical formulas dictate the placement and shape of these points and lines, and maintain their spatial relationships when the image is scaled up or down. Vector graphic files also store color information and can even display text. SVG files are written in XML, a markup language used for storing and transferring digital information. The XML code in an SVG file specifies all the shapes, colors, and text that make up the image. Let’s look at some examples. I’ll start by drawing a simple circle SVG: When I open the file for this circle in a text editor, this XML code appears: As you can see, there’s not much code here. We only need one line of code to draw a circle. That’s because XML does most of the work for us with tags. In the code above, tags are shown in pink within angle brackets. To draw the circle, the XML code specifies the shape with a <circle> tag, its position with the and with the cx and cy attributes, the radius with the r attribute, and the color inside the <style> tag. #f4795b is the hexadecimal color code for this particular shade of orange.
What is an SVG file?
Raster vs. Vector
How SVG Files Work
When provided with an SVG file like this one, a web browser (or other application) takes in this XML info, processes it, and displays it onscreen as a vector image. All modern browsers render SVGs this way, as can specialized graphics editing software.
You’ll also notice that this XML file is written in English. SVGs are basically text files, which makes them readable by humans. This enables developers to make edits to XML files 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:
Though a simple icon, this graphic consists of 30 lines connected by 30 points:
Let’s open this SVG file in a text editor:
Okay, there’s a bit more going on here. But, the concept is the same. We still have our <style> tag, which tells us the color. Instead of a <circle> tag to give us the shape, we have a <path> tag. All the values in this tag specify the points of the graphic and the lines between these points.
How to Open an SVG File
Most browsers are designed to render, interpret, and display SVG files. To open a .svg file, launch your browser, then open the file and it will show in your browser.
Let’s now look at how websites tend to apply SVGs.
What are SVG files used for?
SVG files work best for images that contain less detail than a photograph. That’s still rather broad, so let’s discuss some of the most common uses of SVGs online.
Icons
Most icons translate well to vectors, given their simplicity and clearly defined borders. Icons for page elements like buttons will need to be responsive for varying screen sizes, which means they must be perfectly scalable.
Logos
The SVG format is particularly well suited for logos, which appear in website headers, emails, and in print on anything from pamphlets to hoodies to billboards. Again, logos tend to be simpler in design, which lends nicely to the SVG format.
Illustrations
Vectors also suit non-photo visual art nicely. Decorative drawings on webpages can both scale easily and conserve file space if added as SVG files. You can create the illustrations below, even the textures on some shapes, with SVGs.
Animations and Interface Elements
By harnessing the capabilities of CSS and JavaScript, you can set SVGs to change their appearance dynamically and to trigger automatically during or after an event. Animated SVGs can serve to add visual flair to your pages, or you can use them to engage with user interface animations:
Infographics and Data Visualizations
Would your website benefit from informational displays, like an infographic or illustrated chart? This is another useful application for SVGs. Your designs will scale seamlessly, and text within the SVG file is indexable.
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.
You’ll also see SVGs implemented often on informational sites for data visualizations and maps:
Advantages of SVG Files
XML code isn’t just neat to look at — it makes SVG files both powerful and practical for website and web applications, as we’ll explore in this section.
1. Infinite Scalability
It’s right there in the name: You can shrink or expand SVGs to any size without a loss of quality. Image size and display type don’t matter with SVGs — they always look the same.
This is important because the size of web images differs by viewer, based on browser window dimensions, device, zoom ratio, site layout, and responsive design. Your images must appear fully rendered to every viewer, and SVGs make this a lot easier.
Consider the HubSpot sprocket again. Here’s the logo as an SVG, 100 pixels wide:
And here’s the same logo in PNG format, also 100 pixels wide:
They look pretty indistinguishable now, but the difference in quality is obvious when I scale each up to five times the size:
If you want to expand or shrink an SVG file, the program reading the file readjusts the points and lines to retain clear boundaries and solid colors.
Raster images, in contrast, appear pixelated when blown up on our screens. While there are workarounds for this problem to keep the raster formula — like using different files of increasing size for the same image — they take more work and are more prone to errors. Raster images were ultimately not designed for scaling.
There’s a tradeoff to better scalability, however: By design, 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 a massive and impractical SVG file.
So, both file types have their place in web design. Use PNGs, JPEGs, and other raster formats for photos, and try SVGs for anything less detailed.
2. Customization
SVGs give designers and developers a lot of control over their appearance. Rather than modifying the files directly in a text editor, you can use one of many SVG-compatible editing programs to change your vector shapes, colors, text, and even other visual effects like color gradients and shadow.
3. Scripting Compatibility
The SVG file format was developed by the World Wide Web Consortium as a standardized format for web graphics, designed to work with other web conventions like HTML, CSS, JavaScript, and the document object model.
Thanks to this compatibility, you can control SVG images with scripts. This opens the door for a huge range of dynamic display possibilities, from animations to dynamic charts to mobile-responsive images. This level of control over appearance isn’t possible with JPEG and PNG formats.
4. Accessibility and Search Engine Optimization
SVG files are text files, and this itself offers some advantages over raster formats. First, as we’ve covered, programmers can look at the XML code and quickly understand it.
Also, if an SVG graphic contains text, the text information is stored in the file as literal text (not as shapes). This allows screen readers to interpret SVGs, helping those who have difficulties interacting with digital content.
Lastly, search engines like Google can index SVG files. If you want to place a text-heavy infographic or other SVG display on your page include keyword text in the image. This can help your page rank and improve your SEO. PNGs and JPEGs are limited to metadata and alt text in this respect.
5. Smaller File Sizes
SVG files tend to store images more efficiently than common raster formats as long as the image isn’t too detailed. SVG files contain enough information to display vectors at any scale, whereas bitmaps require larger files for scaled-up versions of images — more pixels use up more file space.
This is good for websites because smaller files load faster on browsers, so SVGs can increase overall page performance.
Disadvantages of SVG Files
While there are many great use cases for SVG images, this may not be the best format for every project. There are two notable reasons why you may not choose to use an SVG file.
1. Not the right format for high-quality or detailed photos.
Designers create vector graphics with points and paths, not pixels. So, you can create a vector graphic by tracing a photograph or using a converter to change your photo into an SVG. But your final image won't look exactly like your photograph.
2. Requires some knowledge of code.
SVG is an XML-based scene description language for graphics. Many web designers use HTML to adjust fonts, spacing, and more. Like HTML, SVG is great for people with some engineering know-how. But if you're not comfortable manipulating code, this may not be your favorite image format.
How to Make or Edit an SVG File
- Create a design to convert to a scalable vector graphic file.
- Trace your design.
- Convert your design into a vector image.
- Resize the artboard as needed.
- Fine-tune your design.
- Export your file as an SVG.
- Copy and paste the XML code to use your design online.
To get started creating SVGs from scratch, you don’t need to know anything about XML or programming. You can draw your vectors in one of the programs listed above and export them in an SVG format. These instructions are for Adobe Illustrator.
1. Create a design to convert to a scalable vector graphic file.
Develop a design in Illustrator that you want to convert to an SVG file. Make sure the imagery is smooth with distinctly indicated corners or curves to ensure a clean transition from non-SVG to SVG.
2. Trace your design.
Click Image Trace over the design in the artboard for Illustrator to select. In the drop-down menu, navigate to Advanced Options. Every design is unique so make sure to adjust as fit.
It's a best practice to lower the number of paths to further smooth the borders of the design. When done, select Outline View for clarity on the design’s borders and the number of nodes present.
3. Convert your design into a vector image.
Click Expand to take the design you’ve identified and make it into a vector. For simple designs like this one, open the Magic Wand tool, click back onto the white of the artboard and delete it. This will discard the background and leave the transparent layer with your vector visible.
4. Resize the artboard as needed.
The smaller the file is, the better it will read on a website. This makes it more likely to improve Google page performance ranking.
5. Fine-tune your design.
Refine your design by removing unnecessary nodes with the Simply or Smooth tool. Adjust as needed to simplify the paths without adverse effects.
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.
6. Export your file as an SVG.
Once you select your design, click File > Export > Export As SVG (*.SVG).
7. Copy and paste the XML code to use your design online.
Click Show Code in SVG Options to view the XML, then copy to use as you create or optimize your website images.
Featured resource: Website Optimization Checklist
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.
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 app and web designers. This platform also has a range of collaboration tools for quick feedback and editing.
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.
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 useful 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
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.
Vectornator
Best For: Feature-Rich Vector Creation
Platforms: iPhone, iPad, and Mac
This free tool is vector-based, which makes it useful for creating SVG illustrations. Its features support Boolean operations. These make it easier to combine shapes. It also has options for masking and auto-trace.
Vecteezy Editor
Best For: Editable Vector Templates
Platform: Online
This web-based SVG editing software makes it easy to create graphics with a huge library of templates and graphics. They also have user-friendly tools to create original vector graphics in your browser.
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 is an easy tool 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.
More popular options include:
- Microsoft Visio, a flowchart, diagram, and infographic maker.
- CorelDRAW, another dedicated vector graphic editor.
- GIMP (GNU Image Manipulation Program), a free, popular, and open-source image editing program.
- Google Docs, you can export drawings created in Google docs to SVG.
Designing for Scale
Scalable vector graphics come in 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 — at least not for your basic images. For photos, stick to PNGs and JPEGs.
Editor's note: This post was originally published in October 2020, and has been updated for comprehensiveness.
Topics: Website Design
FAQs
What is a SVG file for dummies? ›
A Scalable Vector Graphic (SVG) is a unique type of image format. Unlike other varieties, SVGs don't rely on unique pixels to make up the images you see. Instead, they use 'vector' data.
Are all SVG files editable? ›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.
SVG Advantages
SVG images can be created and edited with any text editor. SVG images can be searched, indexed, scripted, and compressed. SVG images are scalable. SVG images can be printed with high quality at any resolution.
The SVG file format is a popular tool for displaying two-dimensional graphics, charts, and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution. Learn more about the key features of SVG images, their pros and cons, and how the SVG format has evolved.
What is the difference between SVG and JPEG? ›JPEG is a raster image format that uses a lossy compression algorithm to compress an image, whereas SVG is a highly scalable, text-based image format that uses mathematical structures to represent an image. JPEG images are used in photography applications, while SVG is used when high-resolution images are required.
How do you turn a photo into an SVG file? ›- Select. Choose an image from your photo library that is less than 2GB in size.
- Convert. Upload your image to automatically convert it to SVG format.
- Download. Your new image will download as an SVG file. Save it, share it, or keep editing it to make it your own.
Disadvantages of Using SVG Images
Because SVG is vector-based, it does not work well for images with lots of fine details and textures like photographs. SVG is best suited for logos, icons, and other “flat” graphics that use simpler colors and shapes.
- Cannot support as much detail. Since SVGs are based on points and paths instead of pixels, they can't display as much detail as standard image formats. ...
- SVG doesn't work on legacy browsers. Legacy browsers, such as IE8 and lower, don't support SVG.
SVG also supports animation and transparency, making it a versatile file format. The only issue is that it's not as widely used as more standard formats like PNG, so it's less supported on older browsers and devices, and it's not always the easiest to upload it to your site and get it to display correctly.
What are the strengths and weaknesses of SVG? ›– it's possible to view the contents of the SVG file in any browser (IE, Chrome, Opera, FireFox, Safari, etc.). Cons: – the file size is growing very fast, if the object consists of a large number of small elements; – it's impossible to read a part of the graphic object, only the entire object and it slows you down.
Which are two features of SVG? ›
SVG is a platform for two-dimensional graphics. It has two parts: an XML-based file format and a programming API for graphical applications. Key features include shapes, text and embedded raster graphics, with many different painting styles.
Can you edit an SVG file? ›To edit an SVG image in Office for Android, tap to select the SVG you want to edit and the Graphics tab should appear on the ribbon. Styles - These are a set of predefined styles you can add to quickly change the look of your SVG file.
What are the different types of SVG? ›SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects.
What is difference between PNG and SVG? ›While PNGs are capable of handling very high resolutions, they're not infinitely expandable. On the other hand, SVG files are vector-based — built from a complex mathematical network of lines, dots, shapes, and algorithms. They can expand to any size without losing their resolution.
Which type of SVG is mostly preferred? ›So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it. SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.
Should I use an image or an SVG? ›Complex images, such as screenshots and detailed illustrations, should use PNG. Whenever it's appropriate to use vector images – such as decorative graphics and logos – definitely use SVG. This is because they are responsive and have smaller file sizes. Just remember that SVGs can only be used or stored as vectors.
Can you turn a JPEG into a SVG? ›Convert a JPG to SVG for free online. The free JPG to SVG converter tool from Adobe Express lets you upload your JPG image and convert it to a vector in seconds.
Can I turn a PNG into an SVG? ›The free PNG to SVG converter tool from Adobe Express lets you upload your PNG image and convert it to SVG in seconds.
Why do you need SVG files for Cricut? ›In short, it is a file that is used to create projects of any size that are clear and crisp. Be sure to try an SVG cut file on your Cricut or Silhouette machine the next time you have a project you want to create. You might also consider an SVG bundle to save some money on those paid files!
Can an SVG have a virus? ›SVG files are also SEO-friendly because they use XML text files that can be crawled by search engines. However, they can possibly be a security hazard, and it's not unusual for SVG files to contain viruses.
Is SVG obsolete? ›
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
Does the size of an SVG file matter? ›An SVG file has the ability to be resized to any size you'd like without losing image quality. The size of an SVG file doesn't matter, as they will look the same no matter how big or small they appear on your website.
Why is SVG a security risk? ›Originally Answered: Is it secure to have SVG as an image on your website? No, there is no security risk in creating and using your own SVG files. The risk would come from allowing untrusted users to upload files. If you make your SVG file yourself, and you put no malicious scripts in it, then feel free to use it.
Can you print SVG files? ›You can use SVG files for some print work, particularly printing for clothing and crafting —but they're not compatible with enough devices to rely on them for day-to-day tasks.
How can I improve SVG? ›- Delete invisible layers.
- Carefully consider converting all text to paths.
- Combine paths. ...
- Don't mask; crop by reshaping you paths and actually deleting hidden content. ...
- Simplify groups. ...
- Scan for non-SVG friendly elements such as embedded raster images.
- Lastly, trim your canvas.
SVG is a lossless file format like GIF and PNG, and they tend to be fairly large files when compared with other formats for the web.
What are the pros and cons of vector? ›| Advantages | Disadvantages | |
|---|---|---|
| Vector graphic | Scalable without losses to quality Can be compressed without quality losses Small file size Object properties can be adjusted Easy to raster | Not suitable for complex graphic displays Rasterisation required for display |
JPGs can contain millions of colours and have much smaller file sizes, but are best for photos where there are no crisp lines or text. For pictures with crisp lines or text (e.g. a graph), stick with PNG and compromise on the number of colours you use. Replace PNG with SVG for simple line drawings, logos and icons.
What are SVG patterns? ›SVG patterns are used to fill or stroke SVG graphic objects. The graphic can either be an SVG or a bitmapped image and through the <pattern> element you tile the graphic at fixed x and y intervals to create a pattern from it. You define a pattern inside a <pattern> element and you reference it through an id.
How do I create and edit an SVG file? ›- Launch Canva. Open Canva on your chosen web browser or the app. ...
- Upload your image. Upload your desired image from your device and drag and drop it onto the layout. ...
- Edit your SVG image. Select your image to make simple adjustments. ...
- Add final touches. ...
- Download in SVG format.
What app can edit SVG files? ›
- Adobe Illustrator. One of the best SVG editors for Windows and Mac, Adobe Illustrator can be your go-to SVG tool every time you need an SVG image. ...
- Inkscape. ...
- Vectr. ...
- Sketch. ...
- Gravit Designer. ...
- Vecteezy. ...
- Affinity Designer.
SVG stands for Scalable Vector Graphic, and they're the preferred file format for working with Cricut Design Space and other cutting machine/design software.
Which Cricut uses SVG files? ›One of the great things about Cricut Joy, Cricut Explore and Cricut Maker cutting machines, is the ability to upload and cut SVG files that you have created or purchased from independent designers, like Especially Paper.
What image type is best for Cricut? ›SVG images are the most common type of cut file to use with Cricut Design Space. SVG stands for “scalable vector graphic”. That means you can make the SVG image as large or small as you want, without it looking pixelated or blurry.
What is better to use on Cricut SVG or PNG? ›The main difference between SVG and PNG is that SVG supports animation and scalability. Another is that as a designer, you can change the colors of an SVG image much easier because it has layers. Here are the pros and cons of using SVG for both digital and print design.
What is SVG when using a Cricut? ›SVG stands for Scalable Vector Graphic, and they're the preferred file format for working with Cricut Design Space and other cutting machine/design software.
Why does Cricut use SVG files? ›Without getting too technical, an SVG file is a file that is mathematically designed, and thus works perfectly with the Cricut and other cutting machines. In contrast to being designed in pixels, like a JPG or PNG, it is created using lines and points.
What are SVG files for Cricut? ›An SVG file, the Scalable Vector Graphics format, is a vector format that allows you to scale up 2D designs without having to lose quality. The best Cricut machines enable users to create designs on dozens of different fabrics, so there is a machine for everybody.
Can I make my own SVG for Cricut? ›While The Design Space puts some basic tools in your hands and even has a simple SVG converting tool. Corel makes it possible to custom-craft your own shapes, prints, and whole-project designs before exporting your chosen files to print through your Cricut.
Is SVG a good format? ›Scalable Vector Graphics (SVGs) work well for logos and graphics because you can scale them up or down for different purposes. They're also a popular choice in web design because search engines like Google can read their XML programming language.
Why is my SVG not supported in Cricut? ›
svg or . dxf files cannot contain linked images when exported for Cricut Design Space image upload. Explanation – Linked images are images that are not embedded within your file. The file contains links to images that are stored in other places (this keeps the file size small).
What format does Cricut Maker use? ›bmp, . png, and . gif file types. These files are uploaded as a single layer, and you can edit the image during the upload process.
How to edit a SVG file? ›To edit an SVG image in Office for Android, tap to select the SVG you want to edit and the Graphics tab should appear on the ribbon. Styles - These are a set of predefined styles you can add to quickly change the look of your SVG file.