[00:00:05] SY: Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron. And today, we’re talking about Scalable Vector Graphics or SVGs with Christina Gorton, Developer Advocate at Forem.

[00:00:20] CG: As we started thinking of more performance, things being responsive, as people started pushing what you could do with like animations, then people started reaching more for SVGs.

[00:00:31] SY: If you have a question for Christina after listening, don’t miss the Ask Me Anything Session she’s hosting on the Code Newbie Community forum. Just head to community.codenewbie.org and you’ll find her threat on our homepage and she’ll answer you directly in the comments. That’s community.codenewbie.org. In this episode, Christina talks about what an SVG is, and when you might use SVGs over CSS or JavaScript for your graphics or animations, and why using SVGs has grown in popularity in recent years after this.

[MUSIC BREAK]

[00:01:15] SY: Thank you so much for being here.

[00:01:16] CG: Thank you so much for having me.

[00:01:18] SY: So Christina, you’ve written about and done a ton of really, really neat things with SVGs, and we’re going to get into all of that. But first, tell us how you got into coding in the first place.

[00:01:28] CG: Yeah. So I did not code at a younger age. I did grow up in the time of like when everyone was starting to get computers and had computers and so I had to teach my parents things occasionally, but I was never really into code at all. I was a stay-at-home mom for a while. And my husband was in a job that just wasn’t really great physically for him. And I kind of stumbled upon programming through things like CodeNewbie and freeCodeCamp. And I was like, “I’m going to teach myself this. Let’s see how this goes.” And so that’s what I did. I just started reaching out to kind of the tech community and learning from the community until I got a job.

[00:02:07] SY: So what finally made you take the plunge? Was there a person or a moment when you said, “You know what? I’m going to give this a shot”?

[00:02:15] CG: Yeah. My husband and I, before we had kids, we kind of like traveled around a lot. We were living in a travel trailer.

[00:02:20] SY: Nice!

[00:02:20] CG: We hitchhiked. We were very nomadic and we wanted that kind of lifestyle. And we always wanted to kind of come back to Costa Rica where we are currently. And once we had kids, we were like, “We can’t just travel around, not making money anymore.” So it was actually my father-in-law who was like, “You should consider coding.” He’s very into like tech stuff. He always knows things before anyone else, like the newest tech stuff. He was like, “You should try coding. You can work remotely.” And I was like, “What? Okay.” And so that’s when I started looking into it and I was like, “Okay, I think this is something I can do or at least I’m going to try to do.”

[00:02:54] SY: So one of the things that I’ve been hearing recently is the move away from calling ourselves self-taught developers to community-taught developers, which I think is just a really sweet way of kind of giving credit to all the people, the content creators and all the folks who support people who are learning how to code. So tell us about how you went about being community-taught?

[00:03:16] CG: From the very beginning, I was just kind of looking for resources online. I was a stay-at-home mom and I didn’t have time to like go to a bootcamp or do anything like that. And so I was really searching for stuff online. And the community around that time was really putting out a lot of really good stuff. That’s where freeCodeCamp was really getting more popular. There were YouTube videos. And I got on Twitter pretty early on and just kind of reached out to the tech community and found resources that way. And as I was going, I tried to give back. So the whole community thing for me was like, “I was learning from other people.” So I was like, “I’m going to teach other people what I learned. I really knew nothing at the beginning. So let me teach them what I didn’t know.”

[00:03:57] SY: That’s great.

[00:03:58] CG: And so that’s kind of how I went about it.

[00:04:00] SY: So when people get started learning how to code, there’s kind of the big three that you start with, right? There’s HTML, CSS and JavaScript, and you generally kind of go about it in that order. Tell us a little bit about the differences between those three things. What are they? And what made you gravitate towards CSS when you first started?

[00:04:19] CG: Yeah. So HTML and CSS, if you want an analogy of like, say, a house, you have your frame of the house as your HTML. You’re building up your website with your HTML, whether it’d be titles, paragraphs, things like that. If you want to paint to make your house pretty, you want to make your website pretty, you can use CSS for that, also to lay out the different areas in your house. Where do you want your furniture? So same with your website. Where do you want things? You CSS. And then though you can do this with CSS for the longest time, if you wanted to make things more interactive. So in your house, if you have a smart house and you wanted to make things interactive, same with your website, you would use JavaScript. And for me, when I started learning and I started getting into JavaScript, that kind of more logical of like the programming, at the time, I didn’t even know how to create a file on a computer when I was starting to learn CSS. And I didn’t know what a code editor was. So there was so much there that I just had to take a step back. And for me, I’ve always been a very kind of visual creative person. And so I really fell in love with CSS. And I thought, “Okay, I can dive into this even more.” I saw that it was powerful and I could do a lot with it. And that learning some of the stuff with CSS that you could do at the time, variables and things, could help me learn JavaScript as well. But for me, it was much more visual and I could understand better.

[00:05:41] SY: So tell us about your first coding job and how you got it.

[00:05:44] CG: Yeah. Because I was doing a lot of CSS and I was kind of pushing CSS in a way other people were starting to at the time too, with CSS art, I had a lot of CSS art on CodePen, it’s what I used to put my stuff up. And I found the job from CodePen actually. They had put their stuff on CodePen and I reached out to them and they really liked what they saw and they thought I would make a good front-end developer. And so I was working with them as a remote developer early on, and they also were an agency. So I got an agency job for my first job.

[00:06:17] SY: Very cool!

[00:06:17] CG: Yep.

[00:06:18] SY: So tell us about what you do here at Forem.

[00:06:21] CG: If you look at my tech journey, I did a lot of front end teaching. I did technical writing for a while and editing and I’ve kind of combined those things into now a community centric job. And so I help with the open source side of Forem. Forem is open source. Anyone can contribute to Forem, DEV.to and CodeNewbie are on Forem. So if you’re contributing to Forem, you’re contributing to all of these things, and I help manage all of the issues coming in. I help triage those. I help getting eyes on your PRs and then I help just kind of bring the community together in different pieces.

[00:07:01] SY: So I’ve seen so much, really, really incredible art being created with CSS, and you’ve done some really creative things as well. Tell us about the kinds of things that you were creating with it.

[00:07:11] CG: I started just really simple, just trying to get shapes with CSS and putting them together. Can I create something cool? There were a lot of people doing this CSS art challenge at the same time and we would get prompts. And so it’d be like, “Create a lion with CSS.” So you would, you would take divs in your HTML or whatever element you wanted, usually divs. And then you would shape them with CSS and color them or maybe animate them. And from there, I kind of grew into, “I want to challenge myself. What else could I do?” And so I was taking famous artwork and trying to recreate it with CSS.

[00:07:46] SY: So you mentioned div a few times. What is a div and what does it mean when it comes to CSS and coding?

[00:07:51] CG: Yeah. A div was just a container. If you want to think of semantic HTML, things like your menus and paragraph, your h1, things that tell you what it is, a div doesn’t do that. It’s just a container that holds stuff. And so when you’re creating with art, you don’t necessarily need it to be semantic because you’re just trying to create like a pitcher. So you can name things in HTML. You can name them with different classes to make it so that if someone’s reading your code, they can understand, but you just use divs, these little containers that you can then shape. So it’s basically like a box that you get and then you can shape that box however you want. What is the difference between CSS art, the kind of art that you are creating, and something else that people make pixel art?

[00:08:39] CG: Yeah. So pixel art, you can do it a couple different ways. I haven’t done a ton of pixel art, but a lot of times people use the box shadow property in CSS and they will create each little pixel of what they want something to look at. So they’ll build up, say, I’ve seen like a Mario. So you would take a Mario and you would create little pixels from box shadows and then you have your art. With CSS art that I did, you would actually have several different kinds of elements. A lot of times with the pixel art, you have like one element that you’re building off of with the box shadow property.

[00:09:12] SY: So where do SVGs fit into all of these?

[00:09:15] CG: Yeah. So I was creating the CSS art because I was trying to push myself and learn CSS and it’s really fun, but an SVG is much easier. It depends on who you talk to, but you can create something from SVG much faster than you can with CSS art. And also as far as like performance, animating it, getting an image just quicker to the web, a lot of that was easier for me to do with an SVG once I learned SVGs versus trying to do everything, shaping a bunch of boxes in CSS.

[00:09:52] SY: So SVGs I know can scale really nicely and they work really well with graphics, animation. And if that is the case, I’m wondering why not use SVGs for all images and in all animations? Why are there even other options?

[00:10:06] CG: Yeah. So a raster image is something that is a PNG or a JPEG. I think there’s other formats as well, but those are the ones people think of mostly when they think of an image on the web. And if you have something that has a lot of detail to it, so you took a picture of the ocean and you have the waves and you have birds in the background and you really want to have all of that there, then you want to use a raster graphic. You want to use a PNG or a JPEG because you want to give more details. If you’re more concerned about performance, maybe you don’t need something as detailed. Maybe you could have some like waves in the background and some clouds or something, then you can use an SVG for that and you don’t have to worry as much about having to optimize for bigger or smaller sizes like you have to with PNG and JPEG.

[00:10:54] SY: Outside of web pages, can SVGs be used for other things as well?

[00:10:58] CG: Yeah. I think a lot of people don’t think about that necessarily. They hear SVG. If you’re in tech, you hear SVG and you think, “Okay, an image on the web.” My mom, who does stuff with like a circuit cutter. So if you have like a tumbler that has some kind of image on it that maybe someone’s put on it, or a decal that’s on a car, you can do that with something called like a circuit machine. And she uses SVGs for that. She gets an SVG off of wine, and then she gets her shape and she can use it for that. So you can use SVGs in other ways that I think people don’t necessarily think of initially.

[MUSIC BREAK]

[00:11:51] SY: So I want to get into animation a little bit more. I want to dig into that a little bit more. Can you walk us through the difference in process and tooling, working with CSS and animating with CSS versus with SVGs?

[00:12:04] CG: I guess starting kind of with CSS. With CSS animations, you usually are animating, so you can use CSS to animate an SVG. But if you’re thinking of just animating something on the web, like you wanted to animate an image in, so you have a picture on your website. You want to animate it in, you can just start writing the CSS right there in your editor and then you can make that happen as long as you know how to animate with CSS. With an SVG, technically you can do that too. You could get your SVG code and you can put it on there and you can start animating, but sometimes there’s unexpected things that you might not realize happen, something in an SVG might move that you didn’t expect because an SVG is often created from a bunch of different, smaller elements that you grouped together into one big SVG. So there is a kind of a process that people who use SVGs kind of go through to be able to animate. So an SVG, first of all, it’s code. It’s just a bunch of mathematical formulas, vectors, shapes that are all in this what’s called XML code. It’s I think technically like a markdown code, but it looks like an HTML element when you put it into your editor. And so it’s made up of different elements. You have your SVG element. If you had a shape that was like a circle, you might have a circle element in there or you have paths and paths you can do to create all kinds of shapes within an SVG. So you could technically do that in your editor. You could try to create an SVG by hand if you wanted to and you knew a lot about SVGs, but most people are going to use an editor like Adobe Illustrator or free options like Inkscape. The course I’m going to be doing with LinkedIn will be using Figma because it’s free. In those, you have these shapes that you can use like circles or squares or you have what’s called a pin tool. And the pin tool gives you points that you can connect together to create paths and you can create all kinds of different shapes that way.

[00:14:07] SY: Very cool.

[00:14:08] CG: So from there, you’re going to group those usually together. So whatever your shapes are. So you have a couple of circles that form together to create a cloud. Well, you’re going to group those together and then you can export them and you use that code inside your code editor.

[00:14:23] SY: So I want to kind of summarize a little bit of what we’ve been talking about here and go over why would you use SVGs over CSS, over HTML and why people should care about these differences and distinctions. Can you give us a little summary there?

[00:14:38] CG: Yeah. So again, if you want a lot of detail and you want just like a really nice image, you’re probably going to use an image just within your HTML and you’re not going to worry so much about an SVG. You will have to think about optimizing because the raster image has a fixed resolution. So if you’ve ever scaled up an image really big and you saw kind of what looked like pixels, they’re little squares that make up an image. And those squares tend to make things kind of fuzzy after a while, if you get too big. And so with an SVG, it never gets to the point where it’s not a crisp graphic. You can get very, very big. You can get very, very small. It’s always going to look the same because it’s made up of those vectors. It’s a mathematical formula that just gets smaller or bigger. And it’s always going to look nice. A lot of times people use them for icons or they’ll use them for logos or they’ll use them as kind of like background elements that need to maybe look cool on a website, like maybe they’re in all kinds of different shapes and they need to scale along with your actual website.

[00:15:46] SY: So I don’t know if it’s just me, but I feel like I’ve been seeing more and more stuff about SVG recently in recent times. Are they something that have been around for a while and maybe not used as much? Or is it just me not paying attention?

[00:16:02] CG: From what I could tell too, coming into development, it was something that, one, it had been around for a while. SVGs have been supported for a long time, but they weren’t used as much because before we really had to think of making things responsive and we had to think of having a huge screen someone might have or a tiny like Apple Watch someone might have. People would just use images. So people would just put images on. They would tend to be at a fixed size. You weren’t really worried about it as much. And so as we started thinking of more performance, things being responsive. As people started pushing what you could do with like animation, then people started reaching more for SVGs because, again, SVG is code, so it is programmable. You can animate it. And so all of these things kind of led to people using SVGs more.

[00:16:56] SY: Coming up next, Christina talks about how to get started using SVGs after this.

[MUSIC BREAK]

[00:17:16] SY: What do you think the future of SVGs is going to be? Do you see it continuing to build on its momentum or do you feel like it might get replaced anytime soon?

[00:17:26] CG: You know, people are really pushing the web in a way that a lot of people like 3D type stuff and an SVG is 2D. It’s not 3D. And so I think if the web starts moving more and more like that, things like WebGL, stuff where you can make things more this kind of experience of something being 3D, then SVG might, I think, taper out, but also I think if we’re keeping in consideration stuff like accessibility, not everyone can be on a website that’s like 3D and moving around. There’s a lot of issues with that. I really see people continuing to use SVGs, pushing what they can do, where they want to, especially as things kind of grow in like CSS and the stuff you can do with CSS and layouts and CSS Grid and things, you can really create cool layouts now with CSS and you can combine those with SVGs to have even neater looking websites.

[00:18:18] SY: So for people who are interested getting started with SVGs, how do you recommend they do that?

[00:18:23] CG: Yeah. So again, in everything I’ve ever done on my courses and stuff, I always throw out CodePen. I love CodePen. I love the community there. There are all kinds of experiments people have done with SVGs. And if you want to just kind of see what someone’s done or look at how an SVG has been created, do you want to see the code? Maybe you’ve never seen it for the first time. Going on CodePen and looking up what other people have done, I think is really inspiring. To get started, you do want to try to have some kind of editor. So whether you choose a free option or one of the ones that cost money, all of them work similarly. As long as it has a pin tool and some shapes, you’re good to go and just get started trying to create something, exporting it, looking at that code and then you can start, it depends on what you want to do. If you want to just have an SVG on your website, you’re good to go at that point. If you want to start animating, then you’re going to want to look into CSS animations or JavaScript animations. You can animate an SVG with CSS. So if you want to start there, that’s a great point to start. And then you can get into kind of more technical stuff as you look at JavaScript animations.

[00:19:32] SY: Is there anything else about SVGs or animation graphics? Anything else you want to talk about?

[00:19:38] CG: Yeah. I think it’s important to keep in mind. So talking about why you might use one over the other as like images and SVGs, something nice about SVGs is that you can make them very accessible. They allow texts and then they allow different like tags and stuff. So you can make them accessible on the web. You can use them for text. So if you want SVG texts, which then can grow big or small as well and stay crisp, you can do that. They can also be optimized for search engines. So all of these things tend to be important to developers and just things to keep in mind. Because you can add text to them, you can make them really searchable on search engines as well.

[00:20:21] SY: Now at the end of every episode, we ask our guests to fill in the blanks of some very important questions. Christina, are you ready to fill in the blanks?

[00:20:28] CG: I’m ready.

[00:20:29] SY: Number one, worst advice I’ve ever received is?

[00:20:33] CG: Within tech, I was told not to have CodePen as my profile. That would look bad when I tried to send it to prospective jobs. Honestly, it has been one of the best things I’ve done.

[00:20:48] SY: Okay. Oh, I love CodePen. So I’m glad to hear that. That’s awesome. Number two, best advice I’ve ever received is?

[00:20:55] CG: When I first started, I was told that I should ask questions a lot, even if it like scared me to ask those questions, especially as a junior, because more people were willing at that time to answer questions.

[00:21:07] SY: Very true.

[00:21:08] CG: Yeah. I’ve taken that along with me kind of throughout my journey, like always just being willing to ask questions and try to get answers and not just struggle on my own.

[00:21:19] SY: Number three, my first coding project was about?

[00:21:22] CG: So I started with freeCodeCamp. So I think whatever their first project was and mine was just like a basic website and I think I wrote something about midwifery at that time because I was having children and it was interesting to me.

[00:21:34] SY: Nice! Very cool. Number four, one thing I wish I knew when I first started to code is?

[00:21:41] CG: You don’t have to know everything right away. So I think that’s really important. I think it’s very easy to get overwhelmed and think you have to know everything and it’s okay to concentrate on just something for a little while and build off of that knowledge as you go.

[00:21:56] SY: Well, thanks again for joining us, Christina.

[00:21:58] CG: Thank you so much for having me.

[00:22:06] SY: This show is produced and mixed by Levi Sharpe. You can reach out to us on Twitter at CodeNewbies or send me an email, hello@codenewbie.org. Join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. For more info on the podcast, check out www.codenewbie.org/podcast. Thanks for listening. See you next week.