Optimize SVG files for websites

Slimming Down

© Lead Image © Sandra Cunningham, Fotolia.com

© Lead Image © Sandra Cunningham, Fotolia.com

Article from Issue 243/2021
Author(s):

Inkscape creates W3C-compliant SVG files, but they are usually larger than they need to be for the web. We'll show you how to optimize SVG files for faster load times.

Graphic images can give a website clarity and visual interest, but the web designer must contend with the tax that heavy graphic images place on bandwidth and load time. Photo images are typically scaled down to a lower resolution (and smaller file size) to run on the web, and for other types of image files, smaller is also almost always better.

One way to reduce the size of web images is to rely on vector graphics whenever possible. The Scalable Vector Graphics (SVG) format was originally developed for use on the Internet. Although SVG typically leads to significant economies of scale when compared to pixel graphics, it has taken decades for web developers to become reasonably comfortable with it.

The most popular tool for vector graphics on Linux is Inkscape. You can certainly save some kilobytes by generating graphics files with Inkscape rather than an alternative raster graphics tool like Gimp. But using Inkscape doesn't mean your files will automatically be optimized for the web. This article highlights some steps you can take to reduce the size of vector graphics image files.

[...]

Use Express-Checkout link below to read the full article (PDF).

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Inkscape 0.45.1

    Inkscape has always been good, but now version 0.45.1 of the vector drawing program shows a totally new creative aspect.

  • Inkscape Vector Graphics

    When it comes to drawing with the computer, professionals often opt for vector graphics. Inkscape brings the power of vector graphics to Linux users. Our workshop demonstrates how to use the program.

  • Inkscape

    The Inkscape vector graphics tool replaces expensive commercial solutions such as Adobe Illustrator. This article shows how to get started with Inkscape.

  • Magic Circle

    Inkscape's extensions add many useful features. Here's how to write your own.

  • Next Steps in Vector Graphics

    What are vector graphics and how could we make them better?

comments powered by Disqus
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters

Support Our Work

Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.

Learn More

News