Exporting images as SVG from Figma

- [Instructor] The moment I've got the Aria Oslo logo as a text, how do I make it an image, like we have on the final side? What I wanna do is actually export this image out. Now it's the right size, it looks pretty good to all my design. How do I go about doing that? So what I'm gonna go and do it let the site logo area, on my site of course. And then I'm gonna go into this Export sign at the bottom of the page.

And what I'm gonna do is talk about the Export things here. Now, because this is a vector logo, what I'm actually gonna change it to is an SVG, a scalable vector graphic. What this means is I can make it big or small as I like and it doesn't pixelate. Other things like .png and .jpeg do pixelate so we have to actually put them on the right size. We'll talk about that a little bit later. So for this one, because it's a vector logo, we're gonna do it as an SVG. So I'm gonna export this, and this will currently live in my Downloads.

Then what I'm gonna do, I'm just gonna drag this over to my Desktop. And what I need to do is add this to my project somehow. How do I add it to my project? Gonna go back into my editor and I'm gonna drag it into my project like this. There we go, Aria Oslo. And what I can do is add this into my code by going into index.html and replacing this text with whatever I like. Well what do I want to put in here? What I want to put inside here is an image.

Now an image tag in html is like this, we use the anchor brackets and then I-M-G. When I close this, why isn't there a closing tag like every other tag that we've added? So the A tag has a close A tag, the Nav has a close Nav, the header, has a close header. Img doesn't because it can't add anymore content inside of it. So it just lives on it's own. This is basically a single tag. What I wanna do on the image is pull in which image we're talking about.

Which image are we talking about in this case? Site-logo.svg So here what I'm gonna do, is just add a space after the G and then write src, we're pulling it into the page. The source of the image is this. Now this is short because back in the day, back in the 80's when html was just invented, they wanted to save as many bytes as possible, so they said src instead of source. And this is gonna be equal to in quotes, the site-logo.svg.

I can actually slide it in here as well, just for speed, site-logo.svg. Now what I'll see on the site, is if I go to preview is we have the Aria Oslo logo. Now there's one more thing I just quickly want to add in which is called an alt attribute and that basically gives us more advantages. So basically, at the moment, site logo doesn't mean anything. So if I'm Google and I'm looking over this website, I don't know what this image actually is.

So for this, what I wanna add is some extra alternative information to tell us what this image actually is. This is good for SEO, it's also really good for accessibility as well. So what we're gonna do is we're gonna go to the end. Not quite the end, just this anchor tag, and add a space. So I've got this anchor tag still with me. I wanna add the word alt and this is gonna equal, in quotes, a description of what this image actually is. So this is good for your search results, this is good for accessibility, it is good for Google images as well, for instance.

This is the Aria Oslo logo. So this just gives us a bit more of a description about what this is. So if we look now, doesn't make any difference. It is a good thing to add in and it does add a bit of accessibility and SEO for us as well, search engine optimization, we'll talk about that a bit later. But what we wanna do next is we wanna fix this layout. It kind of, it's okay, it's not exactly what we need, we kinda wanna go towards a little bit more like this.

So that's the next things we gonna do. We're gonna start fixing this layout.