Three Ways of Decreasing SVG File Size with SVGO - SitePoint (2023)

Three Ways of Decreasing SVG File Size with SVGO - SitePoint (1)

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article I suggest three ways in which SVGO lets you optimize SVG graphics to make them suitable for web use.

Why You Need to Optimize SVGs

SVG (a.k.a. Scalable Vector Graphics) is a resolution-independent graphics format. The big advantage of not being pixel-based is that SVGs look awesome on our shiny retina screen-enabled devices and work great on the responsive web.

If like me you’re not a graphic designer, you might have found yourself grabbing ready-made SVGs from various Creative Commons or Public Domain online sources. One downside of doing so is that often such artworks are not produced with the web in mind. This means that you might find they’re rife with over-complicated paths and Photoshop-like effects. Also, since SVGs are XML-based, digging into the source code often reveals lots of unnecessary markup. Apart from my ingrained love for clean code, complexity and bloat add to the file size and negatively impact on website performance.

Don’t think that if you draw SVGs yourself you’ll be totally in the clear. Although the latest versions of Adobe Illustrator make it possible to export reasonably clean SVG markup, older versions, as well as some different vector graphics editors, still sprinkle the markup with unneeded comments, doctype declarations and proprietary attributes.

Here’s an instance of graphics editor-generated code to illustrate the point:

<svg xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 1000 1000" version="1.1"> <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)"> ... More code here </g></svg>

Instead, all you really need is:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <g id="layer1" transform="translate(0,-52.362183)"> ... More code here </g></svg>

Furthermore, if you don’t use layer1 in your CSS or JavaScript, you could get rid of the id attribute on the <g> tag as well.

Personally, I’m in favor of a bit of manual cleaning up of SVG code. But, fear not, the bulk of the most tedious and repetitive part of the optimization work easily lends itself to automation.

(Video) How To Minify / Optimize SVG Files By Hand

What Is SVGO?

Without a doubt, the most popular tool available for the job at this time is SVGO.

SVGO runs on Node.js, an asynchronous, event-driven runtime to build scalable network applications. You don’t need to know how to build applications with Node.js in order to work with SVGO. However, you need to use your computer’s command line user interface (CLI).

SVGO allows you to enable or disable specific optimizations by enabling or disabling its plugins.

For instance, if you want to remove empty attributes from your SVG graphic, you’ll have to enable the removeEmptyAttrs.js plugin.

You can see a full list of all the available plugins for SVGO in the project’s README file on GitHub.

There are quite a few ways in which you can integrate SVGO in your development work. In what follows, I’m going to discuss just three of the options open to you.

#1. Just Node.js and SVGO

To start using SVGO, just install Node.js by downloading the latest stable version corresponding to your operating system and follow the instructions in the installer.

Next, you can install SVGO using npm, Node’s package manager. Type this command in your terminal:

npm install -g svgo

Now, you have installed SVGO globally in your machine so you can use it anywhere.

To optimize an SVG file, type in your terminal:

svgo yoursvgfile.svg

Replace yoursvgfile.svg with the name of the SVG file you wish to optimize. However, using the tool this way destroys the original file, which is something I wouldn’t recommend. In fact, you might want to make changes to the original file, and destroying all the editor-specific code might prevent you from being able to use your graphics program’s editing features. Therefore, it’s best practice to generate a new, optimized file without overriding the original one. To do so, type this command:

(Video) SVG Optimizer

svgo yoursvgfile.svg yoursvgfile.min.svg

Now, you have two SVG files: yoursvgfile.svg, which is the original file, and yoursvgfile.min.svg, which is the optimized SVG file.

I’ve just performed this step and SVGO lets me know that in just 167 milliseconds it created an optimized copy of the original file. The latter weighed 17.9 Kb while the optimized copy weighs 11.48 Kb, yielding a 36.2% saving:

Three Ways of Decreasing SVG File Size with SVGO - SitePoint (2)

If you open yoursvgfile.min.svg in a text editor, you’ll see much less code, which means a much smaller file size. Great!

You can also point SVGO to an entire folder using the -f flag, like this:

svgo -f ../path/to/folder/with/svg/files

To customize the output SVGO generates, enable the many plugins available. For instance:

svgo yoursvgfile.svg --enable='removeComments,mergePaths'

The command above creates an optimized version of yoursvgfile.svg by removing comments and merging multiple paths in the source code.

#2. Integrate SVGO in Your Gulp Workflow

A widely adopted front-end workflow these days includes a task runner that performs automated operations like compiling Sass into CSS, minifying scripts, etc.

One of the most popular task runners is Gulp, which is both powerful and quick to implement.

It’s easy to integrate SVGO with your Gulp-based workflow thanks to gulp-svgmin.

You install gulp-svgmin with npm:

(Video) CodeKit 3: SVG & Image Optimization

npm install gulp-svgmin

A basic gulp task for svgmin looks like this:

var gulp = require('gulp');var svgmin = require('gulp-svgmin');gulp.task('default', function () { return gulp.src('logo.svg') .pipe(svgmin()) .pipe(gulp.dest('./out'));});

The code above, which you add to your Gulp configuration file, Gulp.js, takes logo.svg, calls svgmin to optimize it, and outputs it in a dedicated folder.

You can find more articulated examples on the gulp-svgmin GitHub page. If you’re not all too familiar with Gulp but you’d like to get up to speed with it, don’t miss An Introduction to Gulp.js by Giulio Mainardi, which offers an easy-to-follow walk-through.

#3. SVGOMG: The Online GUI Version of SVGO

Command line tools are practical and get the job done quickly. However, nothing beats having a preview of your SVG graphic while you’re optimizing it.

The advantage of the preview is that you immediately realize when a specific otpimization is degrading the graphics by being too aggressive. Therefore you have the opportunity of quickly adjusting the corresponding setting to generate an optimal output before the minified copy is made.

Enters SVGOMG by Jake Archibald

This is a free online GUI (Graphical User Interface) version of SVGO (SVGOMG stands for SVGO Missing GUI):

Three Ways of Decreasing SVG File Size with SVGO - SitePoint (3)

SVGOMG Interface.

To get started, pick any of the following three ways:

  • Drag and drop your SVG graphic in the large checkered, grayed out area you can see in the image above
  • Open your SVG using your computer’s File Upload feature
  • Paste your SVG markup inside the designated menu area.

Or you can click on Demo to try out the application using the demo SVG file already available for you.

(Video) CodeKit 3: Optimizing SVGs

Once you’ve done so, you can adjust the tool’s settings, which correspond to SVGO’s plugins, and immediately preview their effects both on the quality of the graphic and the file size/kilobytes savings.

Three Ways of Decreasing SVG File Size with SVGO - SitePoint (4)

SVGOMG in action.

The huge advantage is that if you go too far with your optimizations and the image starts to break, you can take action right away and nip the problem in the bud.

If you click on Code in the menu on the top left of the application, you can also get instant feedback on the code changes SVGOMG makes in your file as you fiddle with the options.

You can also toggle between the original graphic and the optimized version, which helps you make useful comparisons.

One final neat feature of SVGOMG is that it works offline too by taking advantage of Service Workers technology.

Conclusion

If you care about clean code and website performance, and you should, optimizing your SVG graphics for use on the web is a must.

In this article I pointed you to three ways in which you can optimize SVG graphics for your website using SVGO. There are tons more, for example:

How do you use SVGO? What’s your SVG optimization workflow? Hit the comment box below to share.

(Video) SVG can do that?! (Sarah Drasner)

FAQs

How do I reduce the size of an SVG file online? ›

❓ How can I compress a SVG image? First, you need to add a SVG image file: drag & drop your SVG image file or click inside the white area to choose a file. Then adjust compression settings, and click the "Compress" button. After the process completes, you can download your result file.

How do I reduce the size of an SVG in Inkscape? ›

1 Answer
  1. Save as svgz. + Reduces file size drastically. In my test, the SVGZ was nearly as small as the embeded image in original format. ...
  2. Don't embed the raster image, link it. + Small(est) SVG file. - SVG and raster image must be kept together.
  3. Save as PDF. + Compression nearly as good as SVGZ. + PDF is widely supported.
21 Feb 2017

How do I optimize SVG for my website? ›

1. Use your vector graphic editor
  1. Delete invisible layers.
  2. Carefully consider converting all text to paths.
  3. Combine paths. ...
  4. Don't mask; crop by reshaping you paths and actually deleting hidden content. ...
  5. Simplify groups. ...
  6. Scan for non-SVG friendly elements such as embedded raster images.
  7. Lastly, trim your canvas.

How do I reduce a file size? ›

  1. Ways to Reduce File Size. As you assemble your thesis, the size of the document may become increasingly difficult to manage. ...
  2. Use Styles to Format Your Thesis. ...
  3. Insert Images instead of Using Copy + Paste. ...
  4. Compress Images. ...
  5. Save Images at a Lower Resolution. ...
  6. Crop White Space from around Images. ...
  7. Reduce the Size of Your PDF File.

How to reduce size of SVG in CSS? ›

Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.

How do I reduce the size of an SVG in HTML? ›

Solution with HTML attributes

In this snippet, you can see how to resize SVG in HTML. For that, you need to change the width and height attributes. Here, you can see the height and width attributes that can be replaced with the values you need.

Can we compress SVG? ›

SVG file compress software can compress your SVG image files, allowing you to easily transmit and store your data.

Can you resize SVG File in Cricut Design space? ›

Cricut Design Space automatically resizes all uploaded SVG files that are over 23.5″ down to a maximum of 23.5″, which can create problems if your project is larger.

Can you resize in Inkscape? ›

You learned in Lesson 1 that when you click on an object with the Selector tool, Inkscape reveals sizing arrows on the sides and corners. You can drag them to resize (scale) the object.

What is the easiest way to optimize a website? ›

Guidelines to speed up your website
  1. Use a Content Delivery Network (CDN) ...
  2. Move your website to a better host. ...
  3. Optimize the size of images on your website. ...
  4. Reduce the number of plugins. ...
  5. Minimize the number of JavaScript and CSS files. ...
  6. Use website caching. ...
  7. Implement Gzip Compression. ...
  8. Database optimization in CMS.
30 Apr 2018

How do I optimize images to speed up my website? ›

Optimize your images #
  1. Choose the right image format.
  2. Choose the correct level of compression.
  3. Use Imagemin to compress images.
  4. Replace animated GIFs with video for faster page loads.
  5. Serve responsive images.
  6. Serve images with correct dimensions.
  7. Use WebP images.
  8. Use image CDNs to optimize images.

Does SVG file size matter? ›

SVG Files Have Infinite Scalability

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. And this scalability is important.

How to reduce size of an image? ›

Compress a picture
  1. Select the picture you want to compress.
  2. Click the Picture Tools Format tab, and then click Compress Pictures.
  3. Do one of the following: To compress your pictures for insertion into a document, under Resolution, click Print. ...
  4. Click OK, and name and save the compressed picture somewhere you can find it.

How do I reduce file size of image? ›

The primary way to reduce the file size of an image is by increasing the amount of compression. In most image editing applications this is done by the selections you make in the “Save As” or “Export As” dialog box when saving a PNG, JPG, or GIF.

Which program reduces the size of file? ›

Answer: The process is of reducing file size is called Compression. It is commonly done using software like win rar, 7-zip etc.

How do I reduce the size of an image in CSS? ›

How to resize an image with CSS
  1. Option 1: Resize with the image width attribute.
  2. Option 2: Resize with the max-width property.
  3. Resize with background-size properties.
  4. Add an image to your page.
  5. Resize the image.
  6. Stretch the image.
  7. Other useful resizing settings in Editor X.

How do I reduce the size of an element in CSS? ›

CSS height and width Examples
  1. Set the height and width of a <div> element: div { height: 200px; width: 50%; ...
  2. Set the height and width of another <div> element: div { height: 100px; width: 500px; ...
  3. This <div> element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;

How do I reduce the size of an image without losing quality CSS? ›

Use object fit property in your css, and give a fixed width and height to your image tag or respective class so that every image will have same width and height, Now Your Image won't be distorted. Save this answer.

How do I reduce the size of an image in HTML? ›

One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.

How do I compress a vector file? ›

In this article, you will learn about 9 ways of minimizing the source vector file.
  1. Save options. ...
  2. Deleting unused Swatches, Graphic Styles and Symbols. ...
  3. Using linked images. ...
  4. Cropping of unneeded embedded image data. ...
  5. Reducing the resolution of Raster Effects. ...
  6. Removing excess points. ...
  7. Reducing Width Markers. ...
  8. Using Symbols.

What does SVG compressed mean? ›

A file with . svgz extension is a compressed version of Scalable Vector Graphics (. SVG) file. It is compressed with gzip compression and contains data in XML format. SVGZ files support transparency, gradients, animations, and filters.

How do I compress a SVG file to 15KB? ›

FAQ: How to generate SVG files smaller than 15KB for GT?
  1. Enable SVG minimization.
  2. Optimize vectorization parameters as much as possible to reduce the output size as much as possible. For example select 'clipart' and a one of the lower detail options. ...
  3. Download vectorization result as . zip file.

How do I reduce the resolution of an image in Inkscape? ›

enter desired size (you can change the units in the drop down box. in the export tool choose the desired resolution (96 dpi for on-screen-display, 300 dpi for printing; the number of pixels will adjust accordingly.

How do I resize a project in Inkscape? ›

To change the canvas size in Inkscape, open the Document Properties menu by pressing Control + Shift + D on your keyboard. Under the Page tab, navigate to the “Custom Size” section and type in the size you'd like your canvas to be.

How do I resize multiple objects in Inkscape? ›

Hold down your Ctrl key and select the objects you want to resize. Multiple objects must be selected to activate the following resizing options. Select from the following resizing options. You can resize objects by selecting the resizing option from the Layout menu, or by clicking the toolbar graphic.

How do I reduce the size of my Cricut design space? ›

To change your load Type or material size on iOS or Android, tap the mat settings icon in the upper left corner. Then choose a new Material Load Type or select the Material Size field to adjust the material size. Cricut Explore 3 and Cricut Maker 3 have multiple options for loading materials into the machine.

How do I reduce the size of an image in Cricut Design space? ›

Images can be resized by dragging the arrow button or entering the desired measurement in the edit bar. In order to maintain the correct proportions, the padlock should be left in the locked position. When a new value is entered in either the width or height box, the other measurement will adjust automatically.

How do I resize an image without losing parts? ›

One way to do this is to use a program like Photoshop. With Photoshop, you can resize an image without losing quality by using the "Image Size" dialog box. In the "Image Size" dialog box, you can change the width and height of the image. You can also change the resolution.

Can you resize in Krita? ›

You can also resize the canvas via Image ‣ Resize Canvas… (or the Ctrl + Alt + C shortcut). The dialog box is shown below. In this, Constrain proportions checkbox will make sure the height and width stay in proportion to each other as you change them.

Can you resize vectors? ›

Compare to raster images (also called bitmaps), vector images can be resized without losing on quality.

Can you compress SVG files? ›

In order to compress SVG files correctly, you need the right file compress solution. SVG file compress software can compress your SVG image files, allowing you to easily transmit and store your data.

Why is SVG file so big? ›

The SVG file is bigger because it contains more data (in the form of paths and nodes) in comparison to the data contained in the PNG. SVGs aren't really comparable to PNG images.

Can you resize SVG files for Cricut? ›

Cricut Design Space automatically resizes all uploaded SVG files that are over 23.5″ down to a maximum of 23.5″, which can create problems if your project is larger. Learn how to resize SVG files in Cricut Design Space so they cut at the correct size!

Can you minify SVG? ›

Minify SVG 22%* smaller than the competition

In addition to optimizing your SVG to a very small size, Nano also compress your fonts (if any) and embed them in a single step, resulting in reduced workflow, and very small SVG images that uses less bandwidth and load faster!

What is the difference between SVG and SVG compressed? ›

svg (plaintext SVG) and . svgz (compressed SVG) files are served with the same MIME type. The difference is in the Content-Encoding header, which combined with the Content-Type describes the type of content being served.

What size should a SVG file be? ›

PNG files have a limit of 2,500 megapixels. There are no limits to the size of vector files, including SVGs.

How do I stop SVG from scaling? ›

In order to avoid the no-CSS scaling issue, all you need to do is not remove the width and height attributes from the SVG.
  1. Keep the width and height attributes. ...
  2. Specify your desired width and height values in the CSS.
1 Mar 2016

Does size matter in SVG? ›

Sizing on SVG is pretty arbitrary as it is a vector format, the layout is done with maths and so isn't dependent on the size you specify. However, if the SVG is rendered on the page and then gets resized size it can make a difference at the rendering stage.

How do I reduce image size in Cricut? ›

Images can be resized by dragging the arrow button or entering the desired measurement in the edit bar. In order to maintain the correct proportions, the padlock should be left in the locked position. When a new value is entered in either the width or height box, the other measurement will adjust automatically.

Does Minifying reduce file size? ›

Minify Resources

This in turn reduces the file size and potentially increases the download speed of the file to the browser. The following is an example of how minification reduces a CSS file.

Videos

1. Learn SVG- Optimizing with SVG OMG
(Web Craftie)
2. Sarah Drasner: Intricate SVG Animations
(Creative Bloq)
3. Chris Coyier - The Wonderful World of SVG
(BocoupLLC)
4. Aaron Manire: SVG, Easy as 1-2-3
(Design 4 Drupal, Boston)
5. Session: "Using SVGs in Drupal" by Rikki Bochow
(DrupalSouth)
6. Sara Soueidan: SVG for Web Designers (and Developers)
(Creative Bloq)
Top Articles
Latest Posts
Article information

Author: Golda Nolan II

Last Updated: 11/28/2022

Views: 5589

Rating: 4.8 / 5 (58 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Golda Nolan II

Birthday: 1998-05-14

Address: Suite 369 9754 Roberts Pines, West Benitaburgh, NM 69180-7958

Phone: +522993866487

Job: Sales Executive

Hobby: Worldbuilding, Shopping, Quilting, Cooking, Homebrewing, Leather crafting, Pet

Introduction: My name is Golda Nolan II, I am a thoughtful, clever, cute, jolly, brave, powerful, splendid person who loves writing and wants to share my knowledge and understanding with you.