Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Optimization is an important step before displaying SVG on the web. In this video, you'll learn one of the quickest ways to reduce the size of your SVGs, using a popular optimization tool called SVGOMG.
Resources
Things to look for when manually optimizing:
- Comments
- XML tags
- Id
- Empty tags
- Round numbers
- Inline styling - can go in CSS
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi, my name is Reggie,
I'm a developer and teacher at treehouse.
0:09
SVG, or Scalable Vector Graphics
is a powerful image
0:13
format that allows you to write code to
define graphics for your web projects.
0:17
With SVG, your graphics can scale and
0:22
maintain detail across
different screen sizes.
0:25
Also compared to bitmap image
formats like JPEG or PNG,
0:28
vector graphics can have
smaller file sizes.
0:32
Even with all the scalability and control,
SVG gives us the SVG code we download
0:35
online and create with a design
tool often have room for improvement.
0:41
This workshop is all about ways to make
your SVG better before displaying them
0:46
on the web.
0:51
[SOUND] You will learn how to optimize,
organize, and
0:51
structure your SVG, [SOUND] as well as
how to position your SVG [SOUND] and
0:55
make them accessible to all users.
1:01
To be successful with this workshop, you
should be familiar with the basics of SVG.
1:03
I've added some links to
the teacher's notes, so
1:08
you can check out
the suggested prerequisites.
1:10
At the end of this workshop,
1:13
you'll have the tools to build faster
loading, accessible, customized SVG.
1:15
Let's start with optimization.
1:20
In this video, I'll show you how to
quickly reduce the size of your SVG both
1:22
manually and with a web app.
1:26
Make sure to download the starter
files to follow along.
1:28
Producing the smallest possible file
size makes your site faster for users.
1:32
Slow loading sites can cause users to
leave your site before accomplishing
1:38
their goals.
1:42
[MUSIC]
1:42
Whether you're embedding SVG in your HTML,
1:46
including it as a CSS background image,
or using it directly in an image tag,
1:48
optimization is an important first
step before displaying SVG on the web.
1:53
SVG files often contain additional tags,
attributes, and text comments that do
1:57
not affect their functionality and
don't need to be included.
2:02
These additional lines of code
can increase file size and
2:07
make SVG slower to load.
2:10
To better understand how
tools trim down SVG,
2:12
let's first manually optimize an example.
2:15
When we open our truck.svg file,
it may look a bit cluttered with comments,
2:19
metadata, user ids, and
unnecessary tags and attributes.
2:23
We can manually clean up an SVG
by deleting unnecessary code.
2:28
Looking at our code,
we can see an id of Layer underscore 1.
2:32
Let's delete this since we don't
use the id for any styling.
2:37
There's also a comment which mentioned
which editor was used to create the SVG.
2:43
Let's delete this also,
since it doesn't have any functionality.
2:48
When we save our file, and
refresh truck.svg in the browser,
2:51
we can see that it still
renders unaffected.
2:56
When optimizing an SVG,
here are some things to look out for
3:01
that can slow down your file.
3:06
[SOUND] Comments, [SOUND] empty group
tags, [SOUND] long decimal values,
3:08
[SOUND] and inline styling.
3:13
For larger files, or
when we're working with many files,
3:15
it may be more convenient and less error
prone to use a browser tool like SVGOMG.
3:19
I've posted the link to
SVGOMG in the teacher's notes.
3:25
SVGOMG is an online tool that
allows you to drag and drop an SVG.
3:29
It automatically trims down your file,
and removes the unnecessary code.
3:35
You can even preview the markup
changes that take place, and
3:39
select different options to
customize your optimization.
3:42
Let's drag, teaching.svg from our
Downloads folder, into SVGOMG.
3:46
With the default settings of the app,
3:52
we can see that we've trimmed our file
down to 78% of the original file size.
3:54
On the right side of the screen,
take a closer look at the options menu.
4:00
At the top in the global settings,
we can compare our new optimized SVG to
4:04
the original. Visually,
nothing has changed.
4:09
But when we look at the markup, we can
get a better idea of what's going on.
4:15
In the feature section,
we can target more specific settings.
4:21
Initially, this SVG contains many
paths with long decimal numbers.
4:24
Because of this, the setting
that rounds and
4:33
rewrites paths made
the largest difference.
4:35
When you're finished editing,
click the Download button and
4:44
you're all set to use your optimized SVG.
4:47
Try practicing this with
SVG you find on the web and
4:50
see how much you can
take down your file size.
4:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up