- SVGs are one of my favorite things in front-end development mainly because they're
lightweight and versatile. Today, let's look at
all the different ways you can put an SPG on a page and some of the reasons
why you might reach for one solution over another. (upbeat music) If you need the self teach me channel, my name is Amy Dutton, I'm a web designer and developer. If you're just getting into this space sometimes it's hard to know where to start or what resources does trust. I wanna help you level up and
get to where you wanna be. If this sounds interesting to you, hit the subscribe button below, hold up. Before we dive into the
wonderful world of SVGs you may wanna check out
the description below, there's a lot of content in this video and I definitely don't
wanna waste your time. So I included timestamps
for all the concepts I'm gonna cover. Feel free to jump around
and find what you need. In fact, this video is part one of a multi-part series on SVGs. I'll include links to the other videos in the playlist containing all the videos in the description below. So with that out of the way, you may be wondering what in
the world is an SVG anyway. Well, before we answer that let's take a step back and
talk about images in general. There are two types of images. There's a, there are two types of images, a raster and the vector. A raster file is made up of pixels, think JPEG, GIF, PNG. You can always make a raster file smaller but you can't make it bigger. The computer can't just make up pixels. So this is also why you get blurry images and resolution matters because of the way that a JPEG handles compression, these raster files are great for photos and complicated artwork. On the other hand, a vector
file is based on math. The computer knows the coordinates of all the points to be
able to draw the lines. You can make a vector file as
big or as small as you want since it's all math. Vector files are great for
flat artwork and illustrations. They're also great for large items like billboards and posters. So, EPS, illustrator files, SPGs, these are all vector files. Okay, so let's get practical by looking at an actual design and using some real world application. Let's pull up the self-teach me homepage. At the very top, we have two images, the hamburger menu and the search icon. These are flat shapes which is a perfect use case for an SVG. And then this hero image is a giant photo. We wanna be mindful of
file size and load times, and a JPEG is gonna provide
the best compression. On top of the hero image, we have the logo and some text and usually I want the logo to be an SVG, since an SVG is a vector file and we can make it as large
or as small as we want. We can also change the
color within the code. Meaning I could use one SVG
file to serve several purposes could display a white version, a black version, a large
version and a small version. So right there that's one
file and different use cases. And SVG is gonna be crystal
clear on a retina display which is what we want when
we're talking about branding. The only downside with
the self-teach me logo, is that it has some texture in it. It looks like a marker wrote it out. If you look at this file in illustrator, you can see that there are tons of points to achieve the slug. That also means that our
SVG has to keep track of all these points. So even though in most cases an SVG is gonna be a smaller file size, here it's actually larger. So, just for kicks and
giggles, let's compare. In Figma, I can select the logo and then click on the export button, and let's use a PNG so
that we get transparency. And then I'm actually
going to add another export and this will also be a PNG but this time I want to
make this two X for retina, then I'm going to export a third file, and this time we will make it an SVG. Now within the finder, let's
look at our file sizes. Yep, this is just what
I would have expected. The SVG is 192 kilobytes,
which is almost five times more than the retina version of the PNG. So when in doubt, export both file types and compare the file sizes. Let's keep moving down our mock-up. Next step is my avatar, and since that's a photo,
JPEG is gonna be best. The next set of images that
we come across are these logos for sites that I worked on. Yes, an SVG would be ideal, but I don't have a vector
version of these logos. So I'm just going to use
what I have and PNG it is. Scrolling down, we come to
the latest posts section. For each post, there's
an associated image. And since these are photos, a JPEG is gonna give us
the best compression. But, the icon next to the video text and the arrow on the read article button, are perfect use cases for SVGs. We can reuse these throughout the site, changing the size and the color. In the email signup section, I have an emoji and this could be text but you have to remember that emojis don't always display the same
way across multiple platforms. PCs and Androids have their own emoji set, plus on older machine they
might not have emojis at all. So in order to make sure that everything looks
correct across the board, this is actually an image. And in order to get transparency, this is, you guessed it, a PNG. So, here at the bottom, the
only other images I have is this X between the nav items and the social media
icons at the very bottom. What do you think? Let's go through the same
process as we did before and export these files. I'm gonna export the YouTube
logo as two PNGs and an SVG. So this is interesting, our SVG is actually bigger
than the one X version. So you might be tempted to use that PNG but, let me remind you you'd
actually need both PNGs one for normal display and one for retina which is a larger file size and would mean multiple HTTP requests. Besides, part of the beauty of an SVG is that you can use one file for multiple instances and color. So, if we jump over to the contact page you'll see that I'm using
the same icons, big and pink. If we're using PNGs, we need to export another set of icons for this page, but with an SVG, it can handle
both of these use cases. So, now that we know what an SVG file is and we've reviewed some use
cases, let's get it on the page. There are seven ways, before you panic think
of this as a good thing, you can have one file with multiple options for implementation. It really just depends on your use case. And don't get overwhelmed, I've created a cheat sheet
that lists out all seven ways and the pros and cons to each. So check out the description
below for a link. The first way is with an image tag and this is similar to
any other type of image. For these code examples,
I'm going to use CodePen. If you've never used CodePen before it's a website that has
a free code sandbox. It's great for when you wanna experiment or share code examples. We won't be using any JavaScript today, so the first thing that I'm gonna do, is click on the down arrow and minimize our JavaScript panel. So I have a pro account
which gives me the ability to upload files. So I'm gonna click on the assets
button here at the bottom, I'm just gonna drag and drop
an SVG of the CodePen icon. Now I can click on the copy
as button and select copy URL. Now, within my HTML, I can
write out a simple image tag and paste our URL within
the source attribute suite. So this was really easy and it works just like a regular image. The only thing about using
an SVG within an image tag, is that you don't get all the benefits. Yes, the resolution will look great, and you can change the size,
but you can't change the color. The next option we have is to just display the SVG text directly on the page. If I open up my SVG file within VS Code you'll see that it's
just a bunch of texts. But we can copy and paste
this directly into CodePen. And it looks like nothing changed, but let's look at the
contents of this file a little more closely. You'll see that it has a width and height. There's a view box, and those numbers actually correspond with the width and hight. And I never, and I mean never, mess with this because
it's what helps maintain the correct aspect ratio
as we change the size. Then there are two path tags, one is for the circle outline, and one is for the box of pen, inside these tags have attributes that list out a bunch of
weird numbers and letters. These are the coordinates and the math, it uses to tell the browser what to draw. Then lastly, you may have
noticed there's a fill attribute and this contains the
hexadecimal value for the color. So within an inline SVG,
we do have the ability to change the color within the code. We can change it directly
within the fill attribute, or we can do with CSS. But first, if you're gonna
modify within the CSS you need to remove the fill
attribute from the SVG. The attribute on the SVG is similar to having an inline CSS style tag. It will override whatever
we put in our style sheet. So to prevent that from happening, we'll need to remove it altogether. So within our CSS, we
can target it as an SVG. So we'll need to remove
our fill attributes. Then within our CSS, we
can target this as an SVG even though you might be
tempted to reach for color, you'll actually use the fill
property and let's say purple. You can also put a class on our SVG and this is helpful if you
have multiple SVGs on the page and you want to target a specific one. So we can put the class on the SVG itself. Or on the path tag, I can move this here. So, what's the difference? Well, remember we have two paths within this particular SVG tag. We could color one path
differently than the other animated specific path
or hide it all together. In which case we need to put
a different class on each path so that we can control each
component individually. In fact, in then another video, I created a WiFi component
where we use an SVG to color and animate each
of the parts individually, link in the card above. I don't know which side
the cards coming on. I want both paths to be treated the same. So in this case, I would add
the same class to both paths. Before we move on, I wanna
show you a little trick. Let's make this icon link to CodePen, within our HTML, I'm going to
wrap our SVG with an A tag. And then let's also include
some texts next to our icon so that people will know
this is a CodePen logo. If we were to write out the CSS for this, we might target the A tag
and gives us a color of blue, then when we hover over our
link, give it a color of green. Then our SVG, we might want
it to have a fill of blue, and then when we hover over our link we change our SVG to green as well. Unless you want the
colors to be different, this is a little redundant,
don't you think you'd be right? We've listed blue twice and
we've listed green twice. Well, in CSS, there's a little
thing called current color that will help us out. We can get rid of our hover SVG styles, and change our fill on our
SVG to say current color. And this will adopt
whatever color we've defined for the section. So, for us, that's these link style, so let's test it out. It's, that works. Okay, if we change the
links color in our CSS, the SVG will change colors too. And one more thing, as I mentioned, when you're styling an SVG you used the fill
property to fill in shapes but there's also a stroke property. So sometimes your SVGs
will use lines and borders and to change these you'll need to reach for the stroke property. So just for funsies, I'm going to add a stroke
property to our SVG. Cool, coolio. As usual, I've included a link to my CodePen in the description below, feel free to fork it and
snag the code inside. If you liked this video
and wanna see more videos on web design and development, be sure to hit the subscribe button below, hit the bell icon to recieve notifications when new videos are posted. Until then, keep coding. (upbeat music)
