Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed SVG Workflow and Tools !
You have completed SVG Workflow and Tools !
Preview
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