Intro to SVGs

Lea Alcantara: This episode is brought to you by mithra62’s Backup Pro, a complete backup solution for WordPress, ExpressionEngine 2 and 3, Craft, PrestaShop and concrete5. We use this one ourselves for some of our client sites. It’s insanely customizable and includes automated backup integrity, eight built-in storage locations, console routing. Basically, Backup Pro was built to make disaster recovery as painless as possible. Just visit backup-pro.com to get started.

[Music ends]

Emily Lewis: Today we’re diving into the rabbit hole that is images for the web with a primer about SVGs, AKA, scalable vector graphics. Guiding us on this journey is Brenda Storer. Brenda is a designer and front-end developer working at thoughtbot, as well as an HTML/CSS teacher with Girl Develop It. Welcome to the show, Brenda!

Brenda Storer: Hi, thank you so much for inviting me to come on!

Emily Lewis: Oh, we’re excited to have you!

Lea Alcantara: Oh, absolutely! Can you tell our listeners a bit more about yourself?

Brenda Storer: Yeah, I live in New York City. I’m originally from the Silicon Valley, but I decided that I didn’t want to be in tech, so I moved to New York City, and then I became a developer. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: But it took about ten years or so.

Emily Lewis: And I had mentioned your intro, you teach with Girl Develop It. What’s that like?

Brenda Storer: It’s really great. I actually owe Girl Develop It a lot because they’re pretty much the reason why I got into technology. I was a designer. I had a graphic design background and I was starting to look for work really in the first market crash around 2008-2009. And I found the only jobs that I could get my foot in the door was with just this little bit of HTML knowledge that I had, so I started to look for places to develop more skills to get better jobs. And Girl Develop It was just starting in New York City. And I started taking a bunch of classes there and just loved my teachers and went to everything they did. And eventually one of the co-founders, Sara Chipps, hired me at a startup she was CTO at and, yeah, gave me my first kind of break.

Emily Lewis: Exciting.

Brenda Storer: So it’s been great to be able to participate back and be a teacher, and I learned way more by teaching than I ever expected to. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: For me, myself, when I taught in the university back in the city I lived in in Canada, I remember it was actually an interesting struggle to convey the thoughts I knew so simply to the point where I did like end up memorizing everything.

Emily Lewis: [Laughs]

Lea Alcantara: Because as you know, Google is our friend, but because you’re teaching something, you have to end up kind of really, really understanding the core of the concepts that you’re trying to explain. And so I think through that process, you just end up learning more about what you’re doing and why.

Brenda Storer: Yeah, definitely, like I remember particularly I was going to teach pseudo-classes in CSS.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Brenda Storer: I thought, “I know pseudo-classes.”

Emily Lewis: [Laughs]

Lea Alcantara: Right.

Brenda Storer: I thought wrong. I have no idea how to describe nth-of-type. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Right.

Lea Alcantara: Right.

Brenda Storer: Like actually, whenever I have to use nth-of-type, what do I do? I just kind of like plug in numbers until I get the effect I would want, you know?

Emily Lewis: [Laughs]

Lea Alcantara: Right, right, right. [Laughs]

Brenda Storer: So…

Emily Lewis: Brenda, you were telling us before we started the recording that you’re getting started with a new podcast yourself?

Brenda Storer: Yes. So I work at thoughtbot, which is a consultancy, and we’re known in the Ruby on Rails community specifically, although that’s not all we do.

Lea Alcantara: [Agrees]

Brenda Storer: But we have a few podcasts, and we’re actually like just a very cool company that really just encourages anybody to do what they feel like. [Laughs]

Emily Lewis: [Laughs]

Brenda Storer: So I had done a couple of like guest stints on Giant Robots podcast, which is our main podcast, and then one of my colleagues, Laila [Winner], who is in our San Francisco office, had also sometimes would join one of our other podcast, The Bike Shed, so she approached me to see if I wanted to do a podcast with her together. So we’re going to hopefully be launching in the next couple of weeks, in the next month, and we’ve recorded a pilot and our first episode. So we kind of left the working title remain the title. It’s The Laila and Brenda Show. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Nice. [Laughs]

Brenda Storer: But it’s pretty much a tech podcast, an interview format is what we’re going for. So as I was telling you two in the pre-show, I’m excited to learn from you because you both have been so professional in how this has been set up, and I’ve enjoyed listening to you. I’ve listened to some of your podcasts. I listen to you on ShopTalk Show last year, so yeah.

Emily Lewis: Thank you. [Laughs]

Lea Alcantara: Awesome. Thank you. We appreciate that. [Laughs]

Brenda Storer: [Laughs]

Emily Lewis: We try.

Lea Alcantara: Well, especially from a guest too, right?

Emily Lewis: [Agrees] All right, so enough about us. [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: [Laughs]

Emily Lewis: Let’s get into SVGs. Let’s start with the basic. So Brenda, what are scalable vector graphics? What’s different from other formats like a PNG, JPG or GIF?

Brenda Storer: Yeah, I mean, I think the first thing to understand at the base is the difference between a vector graphic and a bitmap. So an SVG is scalable vector graphic. Bitmaps are more common, which would be a PNG, JPG. And a bitmap is made by little bits, little pixels of color that at a higher resolution make an image together, right?

Emily Lewis: [Agrees]

Brenda Storer: So when these little bits of color come together, you can’t tell that they’re there. Whenever you zoom in on a picture, you see all these little squares, right?

Emily Lewis: [Agrees]

Brenda Storer: So a vector image is different where it is a mathematical drawing. So it doesn’t rely on pixels. It actually is straight lines. So in that case, what makes it different is that it is infinitely scalable, which is what has made vector graphics pretty darn important in the web today with so many different screen sizes and retina displays. If it’s the right type of image that you want to display and you can do it in a vector way, it can save you a lot on the web. So I think that’s kind of where SVGs got, because they’ve been around forever.

Emily Lewis: Right.

Brenda Storer: But nobody has been using them until like the past couple of years.

Emily Lewis: What were people using them before the web? I mean, why do they exist to start with? Was it for the web?

Brenda Storer: Yeah. I mean, actually, so the history is that in the 90’s, Macromedia and Microsoft were inventing a format for vector graphics. Basically, they were trying to make a code version to display graphical information. And then Adobe and Sun Microsystems were also trying to do the same thing and they were making competing formats, and the W3C stepped in and developed SVG in 1998, and then…

Lea Alcantara: Oh, really, that long ago. I’m actually surprised.

Brenda Storer: It gets worse. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Because the version that SVG is now is version 1.1, which I think is 2001 is when it was introduced.

Emily Lewis: Oh, wow!

Brenda Storer: And that’s what we’ve got right now.

Lea Alcantara: Wow!

Brenda Storer: So I kind of always say that I think one of the things that kind of drew me to SVG was because it felt like playing with HTML in the early days.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Brenda Storer: Because it’s kind of quirky, and I don’t know, I guess I like it when things are difficult.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: But actually, they’ve been working on SVG 2, and I’ve heard from somebody on the W3C Working Group for SVG that it should be out in 2016.

Emily Lewis: [Agrees]

Brenda Storer: So it should be out this year, but it really is mostly a lot of bug fixes.

Emily Lewis: [Agrees]

Brenda Storer: But possibly some other stuff, which if we get into, I’ll mention because it’s kind of technical, about technical things. Like being able to do things in CSS that we can’t do now with SVG, which would be really exciting.

Emily Lewis: [Agrees]

Brenda Storer: And getting rid of a lot of what I like to call “gobbledygook” that isn’t necessary in the files anymore.

Lea Alcantara: Yeah.

Emily Lewis: So you mentioned when you were describing what SVGs are that they help with being infinitely scalable, which is useful as we’re dealing in a multi-device world, are there any other benefits of SVGs other than this scalability that makes them “better” for the web than the options we’ve been working with before?

Brenda Storer: Yeah, I mean, they’re code, which is the coolest thing.

Emily Lewis: [Agrees]

Brenda Storer: So they also are oftentimes smaller in file size because they are just code.

Lea Alcantara: [Agrees]

Brenda Storer: They are an XML document just like HTML is an XML document.

Emily Lewis: [Agrees]

Brenda Storer: And so one of the features of XML documents is that they can be nested inside of each other.

Emily Lewis: [Agrees]

Timestamp: 00:09:55

Brenda Storer: So that’s why we can inline SVGs in our HTML code. The biggest power of SVGs is that we can manipulate them with code, and we can animate SVGs with JavaScript and CSS.

Emily Lewis: [Agrees]

Brenda Storer: And also then you can use something like the JavaScript library D3.js and just use data and JavaScript to create complex graphs of information visually.

Emily Lewis: Oh.

Lea Alcantara: Right, right.

Brenda Storer: So super, super powerful.

Lea Alcantara: So then what are the cons?

Brenda Storer: Well, every image is different. There are different use cases for everything. Also, I mean, SVGs like you can put bitmap images inside of them.

Lea Alcantara: Okay.

Brenda Storer: Like I think the way to think about them is that like HTML is a document for content, right?

Emily Lewis: [Agrees]

Brenda Storer: And an SVG is really a document for visual information, so whereas a lot of times we’d like to think of HTML as content and CSS is presentation, SVG was meant to have presentation as well.

Emily Lewis: [Agrees]

Brenda Storer: So it has a lot of the same elements that you get in HTML, like if you open an SVG document and look at the code, it looks really familiar because it’s got that same XML structure that we know from HTML. But we’ll get some other elements in there like <rect></rect> is an element, <circle></circle>, <path></path>, these things that are meant to be visual, and so we also have attributes on those elements like fill, which is the color of that shape, or stroke.

Emily Lewis: [Agrees]

Brenda Storer: I mean, these are things you could do in HTML, but that you’re discouraged to do kind of nowadays because we try and keep things separate, but they’re baked into SVG, but you can also do them in CSS on your SVG if you’re inlining your SVG too, which makes it cool.

Emily Lewis: [Agrees]

Brenda Storer: But to get back to your original question, I think the simplest way to look at bitmap versus vector is if it’s a picture, like if it’s a photograph, it’s probably better as a JPG.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Brenda Storer: It’s probably better as a bitmap. But if it’s a logo and has like simple, sharp, crisp edges, it’s probably better as a vector, as an SVG.

Emily Lewis: Is that because SVGs are, I mean, I’m not a graphic designer so I’m not sure of the terms, but it’s like too harsh, like it doesn’t have softness capabilities?

Brenda Storer: No, because, I mean, technically, you could have an SVG … let’s say you have the same image, but it’s not inserting a bitmap image into your SVG. It’s an SVG rendering of a photograph.

Emily Lewis: [Agrees]

Brenda Storer: So it has all the little vector points. That is going to be a lot of data.

Emily Lewis: Ah, okay.

Brenda Storer: So that file is going to be a lot bigger than your image.

Emily Lewis: I see.

Brenda Storer: So I think a lot of times, like — and I’ve been doing design either graphic design or web design for like over ten years, and even so, I’ll often think something is going to be, “Oh, this should be a PNG.” And then I’ll be like, “Oh, wait, you know, actually, it’s smaller. It’s a JPG and it looks good.” It’s like I’m always futzing around to find what is a smaller file size and if things look better.

Emily Lewis: [Agrees]

Brenda Storer: So SVG isn’t always the answer, but I primarily use it for icons and, yeah, really, icons and logos on the websites that I work on.

Emily Lewis: And in terms of, I guess, kind of drawing along the same theme of cons, like what’s the browser device support like?

Brenda Storer: Actually, way better than you probably think. I mean, everything depends on what your website needs are, who you are supporting, but IE 9 and up supports SVG. All the Chromes, all the Safaris, all the Androids. But Microsoft is not even supporting IE 10 and below, I believe.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Brenda Storer: And nobody uses IE 10, like it doesn’t even show up anymore because I think it’s like the in between where like some people are stuck on IE 9 because it was the last Windows Vista or something, you know?

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Brenda Storer: But that they couldn’t upgrade, but everybody who had Windows 7 is at least on like IE 11, so IE 10 is just like…

Emily Lewis: [Agrees]

Brenda Storer: I don’t know if you ever noticed, but all my websites has just miniscule market share.

Emily Lewis: [Laughs]

Brenda Storer: I don’t even think it shows up on canisue.com even as a metric point anymore. [Laughs]

Emily Lewis: [Laughs]

Brenda Storer: Actually, I know because I just looked up to make sure that I had the latest before I came and talk to you. [Laughs] But yeah, and that goes for inlining SVG as well, so when I say inlining SVG, I’m saying you insert the code like into your HTML page of the SVG.

Emily Lewis: [Agrees]

Brenda Storer: But you can also just use SVG like a JPG or PNG with an <img> tag or as a background image, and there are some other ways too, as an object, there’s an <object></object> tag, and that’s absolutely, totally fine. And I think I would even recommend it if you don’t have to manipulate that SVG because you’ll still get the benefits of the infinite scalability.

Emily Lewis: [Agrees]

Brenda Storer: But you only really need to put it inline if you are going to manipulate it with CSS or JavaScript.

Emily Lewis: But I don’t want to go too far into that just yet, but am I hearing you say that if you just called an <img> tag calling an SVG file, you wouldn’t be able to manipulate that with CSS or JavaScript, you’d actually have to put the code inline instead of that tag?

Brenda Storer: There are complicated ways to do it, but basically yes. [Laughs]

Emily Lewis: Okay.

Lea Alcantara: [Laughs]

Emily Lewis: Okay.

Brenda Storer: Basically, yes, the ways to do it, I think, aren’t worth it, especially since the support is the same basically in browsers for inlining SVG or just using it as an image.

Emily Lewis: [Agrees]

Brenda Storer: If you want to manipulate it, just inline it and then anything you write and any CSS file anywhere or JavaScript file anywhere, it’s in your DOM and you can manipulate it. But if you import it through an <img> tag, then you have to inside the SVG itself link to the path of the CSS file that you want to manipulate.

Emily Lewis: Oh, it gets complicated.

Lea Alcantara: Okay, right.

Brenda Storer: And it gets complicated. And also the language isn’t the same as with HTML, so it’s not worth it.

Emily Lewis: All right, let’s talk about some of these detailed use cases, and we can get into that one in a second. I do want to mention though, you were implementing this. We’ve talked about how good the browser device support is right now, but is there a fallback approach that you rely on? Does it vary?

Brenda Storer: Yeah. I mean, one thing I’m fortunate, we’re usually working on greenfield projects, so we usually don’t have to worry about really old browsers.

Emily Lewis: [Agrees]

Brenda Storer: But when I did and if I do — I guess that again like I would only inline an SVG if I wanted to manipulate it — but I think one of the easiest ways, there are a bunch of ways. There are actually a really great article, and I’ll send you the link on CSS Tricks that’s just very much alike all the fallbacks.

Emily Lewis: Okay.

Brenda Storer: And all the different use cases for SVG, but I find the easiest one is if you use an SVG as a background image, you can just use the cascade the way it’s supposed to be.

Emily Lewis: Right.

Lea Alcantara: [Agrees]

Brenda Storer: So just put the PNG as the first background image and then the SVG is the next background image below it, and so then the browsers that don’t support SVG will just not understand that background image and fall back to the previously declared one.

Emily Lewis: [Agrees]

Brenda Storer: And it’s usually a PNG that will be your fallback because a PNG is better at sharper edges.

Emily Lewis: [Agrees]

Brenda Storer: So usually PNG is a smaller file size for bitmap images that are good SVG images. I did actually come into a really strange fallback use case not too long ago where one of my colleagues runs an Emacs Meetup. Do you know what Emacs is?

Emily Lewis: Yeah.

Lea Alcantara: Yeah, the text editor.

Brenda Storer: It’s like an ancient text editor that has a very like loyal following.

Lea Alcantara: [Laughs]

Brenda Storer: But it’s like this text editor that’s like a whole interface, like you can do anything in Emacs. And the people who use it like just basically have their Emacs window open and they’re like Slack in one little corner and the internet in one other little corner on the web, like it’s like their whole screen. So I redesigned the website for the Emacs New York City Meetup, and I made their logo into an SVG. And I got feedback that the logo isn’t rendering in the Emacs’ browser.

Emily Lewis: Oh. [Laughs]

Brenda Storer: Oh my god, it’s not rendering in Emacs’ browser. [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: So I made a PNG fallback and then I added Modernizer to detect only if inline SVG was there or not.

Emily Lewis: [Agrees]

Brenda Storer: But then I ran into the problem that the Emacs’ browser also doesn’t support JavaScript. [Laughs]

Emily Lewis: Oh.

Lea Alcantara: Oh, lovely.

Brenda Storer: Because it’s just text.

Emily Lewis: [Agrees]

Brenda Storer: So what I have to do now is I’m just going to reverse the logic so the default is…

Emily Lewis: A PNG.

Brenda Storer: A PNG.

Emily Lewis: Right.

Brenda Storer: And then if your browser supports SVG, it will show the SVG.

Emily Lewis: Right. So more progressive enhancement versus graceful degradation. [Laughs]

Brenda Storer: Yeah, yeah. [Laughs]

Lea Alcantara: Interesting. I kind of want to take a step back since you’ve kind of mentioned, “Oh, we use SVGs for logos and icons with those types of things,” and then you kind of also mentioned, “Well, a simple rule is photos, et cetera, bitmaps, JPG, PNG, that kind of stuff, and then if it’s going to be a logo or icon, do that for an SVG.”

Now, there seems to be a debate going on regarding one other factor, which is icon fonts versus SVGs. Do you have any idea over when you choose to use SVGs for icons versus why not just use an icon font considering fonts are kind of by default universally accepted everywhere and there are usually repositories that you can just pull from, et cetera and so forth? Like how would you choose, and why would you choose that?

Timestamp: 00:20:33

Brenda Storer: That’s a really good question. I think it depends on the project. I personally would go more towards SVGs because I like to customize my icons.

Lea Alcantara: [Agrees]

Brenda Storer: When I was using icon fonts, I was using Entypo a lot.

Emily Lewis: Right.

Brenda Storer: And I just hated their Pinterest icon. [Laughs]

Emily Lewis: [Laughs]

Brenda Storer: Like I’d use the socials and they’d all looked great, but the Pinterest one just wasn’t right, so I started to use the same little SVGs instead in projects so then I could customize them.

Emily Lewis: [Agrees]

Brenda Storer: But I think it goes with what your project is. Like if you’re already loading fonts, it might just be easier to load an icon font. I do find that icon fonts have their own bugs and troubles, you know?

Lea Alcantara: Sure.

Brenda Storer: Like especially when it comes to leading and there can be weird spacing issues and sometimes require a little more markup if they’re like sitting next to other text and things like that. So I would just like look at it at the whole big project, and if there’s an icon font out there that is solving your problems, then that might be worth it. Or if you really only have a couple of icons or you really want to be able to customize them or you want to be able to manipulate them more than just changing their hover color, then you may want to use an SVG. I mean, that’s another thing if you’re inlining, like this would be an advantage for font icons is that you can treat them like text, so you can change their hover color super easily, right?

Lea Alcantara: Right.

Brenda Storer: But in SVG, you can’t do that unless it’s inlined, and then you can change its fill color.

Emily Lewis: [Agrees]

Lea Alcantara: Right. And I also want to point out, like there’s a client-facing advantage over icon fonts versus SVGs, and that’s if your client is the type that likes to keep switching images to use inline for their own icons or for their own thing. For example, if we’re using something like Font Awesome and they want to switch a different type of font, I mean, font icon, then they just need to choose the class and change it themselves without having to call us, without having to open up an SVG and redoing the image manually if there is that type of client requirement. Some clients do; they like that kind of customization.

Emily Lewis: In addition to what you’re describing, Lea, there is even add-ons for some of the CMSs out there that client doesn’t even have to look up a class, they just can visually pick an option and then there’s the field type that lets them pick the icon they want that they can switch out.

Lea Alcantara: Yeah, and that just makes things really, really easy.

Brenda Storer: Yeah, that would be hard in SVG land.

Emily Lewis: Yeah, they would be calling you. It would be the situation where they would be needing graphic support as opposed to just being able to maintain something themselves. So it is, it’s totally about the project.

Brenda Storer: Yeah, what do you normally do? Do you normally like to use SVGs? Do you like to use icon fonts?

Emily Lewis: I think historically we’ve been more icon fonts, but are moving more towards SVGs, but it’s totally project based. The Font Awesome and the ability for us to make it easy for the client to change that stuff makes that a top option for us. But as we get into more projects with clients who are also trying to optimize performance on their sites, not calling the Font Awesome library not only reduces, like eliminates one HTTP request, but it also reduces the size of that full library. So with some clients, we recommend that they pick and choose the icons they’re using regularly from Font Awesome, and we create like a custom font file for them that’s not the entire library, but allows them to change those classes as they need from a select group. But we’ve just picked up a client who has from someone else, like what is that called….?

Lea Alcantara: Inherited.

Brenda Storer: Like an inherited site where it’s a ton of SVG icons, and for when it was created, it probably made a lot of sense. And right now it’s so extrapolated to an nth degree that it’s almost hard to put the pieces together of how the whole thing was created and maintained. And so I can see there are some problems to also just how you implement SVGs and maintain the files, and if you’re using some sort of build automation tool to create an SVG from an icon that you upload yourself and there are all these other things built in. So I can see it getting complicated, but we’re trying to use them a little bit more and more, but again, project based.

Lea Alcantara: I’m a little bit curious also about the implementation because I know, for example, the old school way, you would create a giant sprite and you just call one PNG that has all the icons in it. Can you create a sprite with an SVG, or would you create an SVG file for every single icon?

Brenda Storer: You can totally create a sprite with SVG and actually there’s a really cool way to go about it where you can make one SVG file. So it’s not in the , but in the , like if you think of HTML and you have your element before your , there’s an area called <defs></defs>, which is an element in SVG, and this is one way to do it. You can put all of the shapes of the different icons that you want. Like let’s say you have four social media icons — Twitter icon, Facebook icon — you can just put them in that <defs></defs> element and then load that SVG inline on your site and just display:none. And then inside of your HTML document anywhere on your site, you can just call that SVG by like class name or something like that and it will load it.

Emily Lewis: Hmmm

Lea Alcantara: So it’s not based on position, which is the old school sprite. It actually is named.

Brenda Storer: Yeah. It’s actually just…

Lea Alcantara: Oh, that makes it easier. [Laughs]

Brenda Storer: Isn’t that cool? But you could also do it the old school way as well. I guess it’s interesting because each little icon is still a callback, right?

Emily Lewis: [Agrees]

Brenda Storer: I mean, I also oft the time — but not if it’s all loaded in that one file — but I’ve also done or I often work on or I most often work on applications … so there’s a gem for Ruby on Rails that’s inline SVG and you basically have an SVG folder in your images or in your assets, and it’s in your asset pipeline.

Lea Alcantara: Right.

Brenda Storer: And then you can just inline SVG so you can just keep them in there. I’ve also done it where, I mean, since it’s just code, sometimes in my views folder where all my templates are for HTML, I’ll just make a new folder that’s SVGs and just render a partial of that SVG inline anytime I needed to use it as well.

Emily Lewis: [Agrees]

Brenda Storer: But again, that would be loading all of that code over and over. So if it’s something really complicated and how big the file is … like oftentimes if it’s a logo, and there are ways to once you kind of understand what the shapes are, there are many ways to draw shape in an SVG and in some ways are going to be less big than others.

Emily Lewis: Right.

Brenda Storer: And most of the times, I mean, I’m not hand-coding SVGs — like I’ve done it for fun to try and understand them — but I’m not hand-coding cubic Bezier curves. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Because I can see it in my head and I know what the numbers are.

Emily Lewis: Let’s talk about that a little bit, so you’re talking a bit about the right and wrong ways to create an SVG or some that are create a smaller file versus a bigger file. How are you making your SVGs? Is it with special software that you have?

Brenda Storer: Yeah. I mean, I’m old school and I still love Adobe Illustrator.

Lea Alcantara: Yeah. [Laughs]

Brenda Storer: That’s my go-to. And like talking about what SVGs were before 2010, to me it was just a file type I never cared about whenever I saved something from Adobe Illustrator because it’s kind of the second option if you save a file. It’s not even export option. It’s like save as .ai.svg and I don’t really know what that is, you know?

Lea Alcantara: Yeah. [Laughs]

Brenda Storer: But it’s been there forever, just nobody was using it. And so I love Adobe Illustrator. I mean, the Sketch is the new hotness, but I like Sketch for different things, but I think personally I learned how to use the pen tool in Illustrator which was a feat that I’m not ready to relinquish that power. [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: And I understand Illustrator well and also Illustrator, the code that it creates from the SVG is much cleaner than the code that Sketch creates.

Lea Alcantara: Oh.

Brenda Storer: Although both companies are working to improve the code, the SVG code that is exported, because there’s a lot of nonsense in it. Actually, in the past year, they both done a lot, but like I’ve given a talk a couple of times about the basics of SVG. And in that talk I will open an exact same drawing in Illustrator and in Sketch and it looks totally different, the code is totally different. And one of the things that you can see in the Sketch version is that there’s all these extra nested layers that Sketch will do. There’s the <g></g> element in SVG, which I call it’s the <div> of the SVG. It’s like it just groups whatever is below it, and so Sketch will have all these <g></g>s like nested, nested, nested like <g></g> soup. And it will also have transform-translate negative instead of like properly positioning something, it will just transform it around. It’s just kind of weird, and also, oh my favorite thing about Illustrator, is if you are in Illustrator and you just copy any shape to your clipboard, so just command+C and then open a text editor and then paste it to your clipboard, it will paste to the SVG code.

Timestamp: 00:30:44

Lea Alcantara: Oh, that’s pretty awesome.

Brenda Storer: Isn’t that magic? And it will also do it in a very neat, tidy way where it will make the edge of your SVG viewBox and the viewport nice and neat and tidy, so like there’s no extra space outside of your drawing.

Lea Alcantara: That’s pretty cool, I would have to say.

Brenda Storer: Yeah, that’s my magic trick. [Agrees]

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Emily Lewis: So in terms of once you create it in an Illustrator and it sounds like Illustrator’s code is more compact. Am I assuming correctly that that means those file sizes are a little smaller than maybe what Sketch might put out?

Brenda Storer: Yes, probably.

Emily Lewis: And beyond that, picking the exported code that’s more compact, what else do you do on a regular basis to kind of optimize your SVG?

Brenda Storer: Well, because I like to torture myself, I will usually hand-optimize an SVG because that’s been part of my learning process about them — which is I delete the things that I know aren’t necessary. And usually I’m working with like smaller icons and logos so it’s not like there’s a ton of things going on, but if you don’t want to do that, one of the best tools out there is SVGO.

Lea Alcantara: Yes.

Brenda Storer: I’m not sure if that’s how you say it, and it has parameters to that you can set, but it basically will just minify and get rid of all of the junk in SVG.

Emily Lewis: [Agrees]

Brenda Storer: Because really, I mean, Illustrator and Sketch are the ones you hear about the most, but there are other vector programs and they all export. Any vector application that deals with vector files will have a SVG option to save, and they’re all going to create nonsense that needs to be deleted and minified. So SVGO is the best.

Lea Alcantara: Yeah, I have to say just recently because we’ve been tweaking Bright Umbrella’s website, and I was looking at our like little logos because our logo is an SVG. And when we were doing performance testing, it was kind of noted that was one of the larger files and after Googling, I did find SVGO or SVGOMG. [Laughs]

Brenda Storer: [Laughs]

Lea Alcantara: It looks like there are different ways they’re calling … and then I plugged it all in there and it’s really interesting and straightforward because it has all these parameters you can check and uncheck. And what it also does too, kind of like when you compress a PNG and there’s like lossy choices where it actually removes content from the bitmap, you can also do that with the SVG, but they do that by making the math less precise.

Brenda Storer: Yes.

Lea Alcantara: And what’s interesting and what I liked about SVGO was that you can actually zoom in really closely and zoom out to see how that removal of precision actually affects how the logo is being rendered. So when I was trying to shrink our logo to be as small as possible, you kind of have to balance the precision with how much things do I have and at what point does the logo become incomprehensible again when you’re zooming in as well as you’re zooming out. And then you kind of have to decide like, “Well, this logo will never be blown up at a certain size, so take out as much detail as possible when it’s going to be that smaller size,” those kinds of things. And that’s what I really liked about that SVGO tool. It just has so much step-by-step, click this, see what happens, and then you can download it.

Brenda Storer: Yeah, it’s like “Save for Web” in Photoshop for SVG.

Emily Lewis: [Agrees]

Brenda Storer: And I mean, with SVGO, sometimes there are things that are important that it doesn’t know are important and it will strip out.

Lea Alcantara: Right.

Brenda Storer: So like being able to preview what it looks like so you know you didn’t break it. I think that’s the stress about SVG is that you think you’re just tweaking something to make it a certain way, but then you just break the whole darn thing. [Laughs]

Lea Alcantara: Yeah, right.

Emily Lewis: So I’d like to talk, I don’t want to spend too much time on it, but I do think it’s interesting the code aspect of SVG that it’s an XML document. And you’ve mentioned some of the elements and attributes that are involved. From the context of what we were just talking about in terms of cleaning up what’s exported, what are your core elements and then maybe some of the core attributes, and then some of the ones that you see often, but that are typically unnecessary.

Brenda Storer: So great question, first and foremost, the <svg></svg> element itself has a whole lot of attributes associated with it. And especially in Illustrator and Sketch, it will export out way more than you need. The viewBox is a beautiful mystery for the most part. [Laughs] No, I mean, it makes sense when you dive into it, but I still will play around with it and get unexpected results.

Emily Lewis: [Agrees]

Brenda Storer: So my advice is don’t touch the viewBox unless you know what you’re doing and you have a reason to. There’s probably no reason for you to touch the viewBox, but leave the viewBox. So keep the viewBox. I also recommend to keep the width and the height declarations because IE and Edge in particular are buggy if they don’t have a width and height declared.

Emily Lewis: [Agrees]

Brenda Storer: Also, just like with HTML, any attribute that CSS can style is lower in the cascade than CSS.

Emily Lewis: [Agrees]

Brenda Storer: So if this is an inline SVG and I have width and height declared as attributes, I can override that in CSS easily.

Emily Lewis: [Agrees]

Brenda Storer: So I like to keep them there just to have it there to be safe. And then there’s namespace, which is xmlns= and then there’s a URL that kind of ends in W3 SVG URL. And I like to keep that basically … it’s just a nice to have where it is a way for a computer to understand what type of document this is.

Emily Lewis: [Agrees]

Brenda Storer: And most browsers don’t necessarily need it, but like my computer won’t understand what that file is in preview if it doesn’t have that attribute on it.

Emily Lewis: [Agrees]

Brenda Storer: So it can cause weird bugs in older browsers so I just don’t think it’s worth removing.

Lea Alcantara: [Agrees]

Brenda Storer: Those are kind of the only things you need in the SVG element attributes.

Emily Lewis: [Agrees]

Brenda Storer: But there are things like enable-background=“new” with a whole bunch of numbers that comes up per serve aspect ratio. These come up in Illustrator, and one of them like only IE 10 understands, so you know. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: And then another one is just the default anyway, so I think these are things that Illustrator is working to kind of strip out.

Emily Lewis: [Agrees]

Brenda Storer: Yeah, for <svg></svg>, that cleans up things really fast, and then everything else is like it’s semantic in the way that it’s pretty self-explanatory with the elements that are drawing are, with <rect></rect>, <circle></circle>, <ellipse></ellipse>, <line></line>. But what you see the most is the element, the <path></path>, and the <path></path> has an attribute d, which means draw.

Lea Alcantara: [Agrees]

Brenda Storer: So basically, the attribute d is giving a bunch of coordinates to tell your browser, tell the computer what to draw.

Emily Lewis: [Agrees]

Brenda Storer: And that’s what all the letters and numbers inside that d do, and so, then that’s where JavaScript can go in and manipulate those numbers and make things happen.

Emily Lewis: [Agrees]

Brenda Storer: That’s the power.

Lea Alcantara: I mean, it sounds like SVG just has all these amazing aspects to work with, but one of the things that I’m concerned about — especially with a lot of developers trying to implement the “new thing” is forgetting about accessibility. Since SVG is literally XML and text … I mean, how do we make an SVG more accessible? Is there like a way to describe the image clearly via text, and is SVG even read by search engines?

Brenda Storer: Yes, it is. So SVG has two elements that are specifically for this, and they’re very much like HTML. One is a <title>, just a <title> element. And that works just like and alt [attribute] basically on an image.

Lea Alcantara: [Agrees]

Brenda Storer: So if you hover it, it all kind of display that text over time. And then it also has <desc> element, which would kind of be like the meta description for an HTML document, I would say kind of be equivalent. So those are things that are good for accessibility.

Also, we haven’t talked about, SVG also can have text. It doesn’t have to be just paths, it can also do really cool things with text that maybe not all browser support. That’s another thing to mention too is that the SVG itself has really good browser support all around, but just like HTML and CSS, all the little things inside have different levels of support.

Emily Lewis: [Agrees]

Timestamp: 00:40:00

Brenda Storer: And one of the ones that is kind of buggy is text inside SVGs. I mean, just rendering regular copy inside SVG is fine, but there are fancy things you can do like outline text. I mean, Illustrator is basically like anything you can do in Illustrator, you can do inside of an SVG with text, which is really, really cool.

Lea Alcantara: [Agrees]

Brenda Storer: So I would also recommend, especially like for graphing, have the text, have the copy inside of your SVG that’s describing your graph because it’s relative to the image that’s being displayed.

Emily Lewis: Right, and that’s going to give you, you know, be able to reach your Emacs group.

Brenda Storer: Yeah. [Laughs]

Emily Lewis: Well, would that be the fallback? Would that actually even work? If it doesn’t read SVG, would it read the text in the <desc> parameter?

Brenda Storer: No. I mean, again, this is only for an inline SVG.

Emily Lewis: [Agrees]

Lea Alcantara: Okay.

Brenda Storer: If you’re going to use an SVG as an image or as a background image, it would be the exact same accessibility use cases or concerns as if it was a JPG or PNG.

Emily Lewis: [Agrees]

Lea Alcantara: Aha.

Brenda Storer: It’s not reading what’s inside.

Emily Lewis: Right. So I want to make sure we do talk about some of the cool stuff you can do with SVGs.

Brenda Storer: [Laughs]

Emily Lewis: You were talking about in the beginning, you just mentioned a slight thing like hover color is something you can do with an icon font, but you can do more with SVGs. So let’s talk about some of those things. Can you share some real world examples that you’ve worked on that you thought were pretty fun?

Brenda Storer: Yeah. I mean, there is really good example how you can use SVGs to manipulate them in a responsive way is there’s library called Iconic. And it’s an icon set that’s all SVGs. And on their home page they have a really great example of this, where these responsive icons adjust with the width of the screens, and the example that they show is a microphone, and so when the screen size is big, when the image is big, the icon is really detailed. The microphone is really detailed. There are all these little dots. But as the icon gets smaller, as the window gets smaller, some of the detail goes away so that the font at the smallest size is just very solid and very simple.

Emily Lewis: I like that.

Brenda Storer: Isn’t that cool?

Lea Alcantara: Yeah, I’m playing with the slider right now, it’s pretty neat.

Brenda Storer: Yeah.

Emily Lewis: Okay, and maybe this is just me thinking too much, but I love this, that if you can remove detail as it gets smaller, but still convey what you’re trying to convey, you have more space for your tap target. Do you know what I mean?

Brenda Storer: Yeah.

Emily Lewis: Like you can design the space, but if the icon itself is a little smaller, your tapped target can stay the same as you get even more, like you keep that. I feel like that’s one of the challenges I see with some designers is that design these small little icons, and yeah, they look great in a mobile device, but you can’t tap them very well.

Brenda Storer: Yeah, that’s a really good point.

Lea Alcantara: I definitely think that even the fact you can take away detail is just such an important thing when you’re a designer, especially because just shrinking a high detail image is not necessarily the best solution when you’re trying to translate that image to mobile.

Emily Lewis: [Agrees]

Lea Alcantara: If you’re just relying on, say, the browser compressing the image, that super large image, especially if it’s an icon, you might have unpredictable aliasing — which is the fuzzies Emily that you’re wondering what that term is.

Emily Lewis: The term. [Laughs]

Lea Alcantara: Yeah. There could be some weird aliasing happening with that, but if you just actually eliminate detail as it gets smaller so that the image itself just gets simpler, then that kind of fixes that problem.

Brenda Storer: Yeah, and then another advantage, like the pretty obviously advantage that we haven’t talked about for icon fonts versus SVG is multiple colors.

Lea Alcantara: Right.

Brenda Storer: Like you can’t have an icon font in multiple colors, so an SVG, you can have as many colors in that icon as you want.

Emily Lewis: So you can remove detail, you can have multiple colors, you still get the ability to change colors via CSS. I mean, have you done anything in terms of animations or have you actually worked with like a chart or like a bar graph implementation yourself?

Brenda Storer: Yeah, I’ve done a little bit of kind of the on the site exploration on that.

Emily Lewis: [Agrees]

Brenda Storer: And I’ll mention a few people who do really incredible things because you just look at it — and it’s not stuff that is probably like possible for client projects — but it’s just amazing stuff with SVGs. But what I’ve done is I did is it was kind of a hacked project at thoughtbot. Do you know what a PGP key is? It’s like this way to sign your emails or digital documents with a way that that’s verifies who you are.

Emily Lewis: [Agrees]

Lea Alcantara: Okay.

Brenda Storer: So it’s like, let’s say Edward Snowden when he was sending very private, big information. [Laughs]

Lea Alcantara: Right, right.

Brenda Storer: And he could sign his emails to never this way and then they would be confident that they were actually receiving it from this person, and likewise send back.

Emily Lewis: [Agrees]

Brenda Storer: So at thoughtbot, people are really into this, but there is this whole web of trust where if me and George are connected and he’s connected to Theo, but then that means we can trust each other. So like you can kind of start to see it in your head these connections with people and who has a lot of connections. So for a site project, a hack project, we decided to try and visualize that, and so we use the library D3.js, which creates SVG graphs from data.

When we made this project, I decided to make it look like a universe and make it look like a galaxy, so I picked up colors from like NASA photos, and all the little people look like kind of stars and planets. And then there are these lines that connect them that are different colors based on their level of trust and connection to each other.

Emily Lewis: [Agrees]

Brenda Storer: And it created this beautiful image graph that actually like is informative and has some information. And all it really was, were some developers plugged in some numbers. This was already D3.js. If you go to the D3.js website, they already show a bunch of examples of graphs and then I just kind of went and picked up the code, and it was enough for a day-and-a-half hackathon to like get something kind of up. So that was really fun and really exciting to see that so easily and quickly visualized. But again, this was kind of like just a small subset of data that we thought about it, and we’re like, “Wow, if this was really the whole world of PGP keys, this would probably break the browser.”

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Like the SVG would be like so enormous, you know? [Laughs] We kind of have to think about that if we ever take this further.

Emily Lewis: I mean, I think obviously SVGs present a solution for our multi-device world as well as the ability to manipulate, but do you think it’s the use with the data that’s going to be where SVG is strongest down the road?

Brenda Storer: I don’t think there is really a competitor with it in that regard. I mean, there is <canvas>, but <canvas> is bitmap, correct?

Emily Lewis: I’ve never worked with it, so I don’t actually know.

Brenda Storer: I haven’t really worked with it either, but I think that its only right now competitor. And there’s a lot of energy going into SVG and all the things that have been worked on that they’re trying to improve on and that browsers are working on. There’s a reason why it’s pretty standard now over the past couple of years that there’s great use for it, because the browsers understood that there’s great use for it, and those bugs get higher priorities and get worked on. Like there are still some bugs in SVG, like one of the main annoying bugs with SVG is with using CSS transforms to animate elements inside of an SVG.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Brenda Storer: It doesn’t work in any IE browser, which is super annoying.

Emily Lewis: Oh.

Brenda Storer: And there’s also SVG itself had its own animation language called SMIL, but Chrome has deprecated it, which has basically killed it, you know? [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right, right.

Brenda Storer: So right now, IE and Edge understand that, so that’s kind of I would say the biggest kind of buggy part that exist. But compared to a couple of years ago, it’s getting so much better because I think it’s so powerful that people are paying attention to it and browsers and the consortium, everybody is listening to it to make it more because there are so many possibilities with it.

Emily Lewis: [Agrees]

Lea Alcantara: Well, I feel like we really have a lot to chew on here with SVGs. We definitely just scratched the surface, so for our listeners who want to know more and want to dive into SVGs, what are you top resources for learning?

Brenda Storer: First, I mentioned that I wanted to talk about a couple of people who are doing amazing things that will just blow your mind if you look at it.

Emily Lewis: [Agrees]

Brenda Storer: So I’ll shout or give them a shout out first. The first is Sarah Drasner, and she’s got — just if you look at her CodePen — she’s an illustrator so she has these beautiful drawings and animations, and just to see what she does is really inspiring. Chris Gannon also does a lot of cool experimental animations with SVG and has a great CodePen I recommend checking out.

So what got me into SVG was at the first CSSconf Sara Soueidan spoke. I guess this was two years ago or maybe it was the second CSSconf, but anyway, she spoke on SVGs and she just blew the room away. And I think that’s what’s gotten me interested in looking into it because it looked like fun, and so I did the kind of typical thing of — well, not the typical thing, but what they tell you that you should do is I wanted to try my hand at giving a talk — but I didn’t have a topic, so I committed to a talk on a topic I didn’t know about, which is SVGs. [Laughs]

Timestamp: 00:50:06

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: And then I had to go and learn everything. So my biggest resource was a book called SVG Compressed by Jakob Jenkov, but it’s actually everything that’s in the book is online at his website, and it’s exhaustive, all the details, all the nitty-gritty. So if you really want to get into the core in the code, that was a really great resource. Anything that Sara Soueidan says or writes about at her blog, she’s fantastic. CSS Tricks has excellent up-to-date information about SVGs and resources. Chris Coyier is super nerdy about SVGs too, and I also think Joni Trythall has this great little pocket guide to SVG and she does like really great visuals that help make it understandable. I recommend the stuff that she has too. And so if you really want to play around too — and this is where I want to go because I haven’t played as much as I want to with animation — there’s Snap.svg is kind of a smaller animation library, JavaScript library that you can use to animate SVGs. And then GreenStock also. It lets you animate SVGs similarly to how we use to animate in Flash.

Emily Lewis: Oh.

Brenda Storer: So you can tween and you have a timeline, which for complex animations is huge instead of trying to work out numbers and do the tweaking and then this element now is a little faster so now I need to make this one, you know?

Emily Lewis: [Agrees]

Lea Alcantara: Right, right.

Brenda Storer: So to play around, that is super, super fun. I’ve been wanting to play around with that badly.

Lea Alcantara: Wow! I mean, I’m just clicking around a few of the samples that you’ve just mentioned as you were talking. Definitely you guys need to check out Sarah Drasner’s CodePen, it is impressive. [Laughs] Yeah, it’s just fun.

Brenda Storer: That’s because she has a good example of like a responsive. It’s a machine vector drawing, but when the browser gets smaller, it just completely flips, but the machine still works.

Lea Alcantara: That’s neat.

Emily Lewis: That’s very cool.

Brenda Storer: It’s super, super neat.

Emily Lewis: And it makes little pandas. [Laughs]

Brenda Storer: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: And it makes little pandas

Lea Alcantara: Fun. Fun. I really enjoyed this episode because there is a lot of fun to be had with SVGs, like obviously, there are a lot of practicality, like yes, you can make icons, yes, you can make your logos into SVGs — which is probably 90% of what people will be doing. But all these other extra things are just so fascinating in that it really shows you how far the web has come.

Brenda Storer: Right.

Lea Alcantara: Yeah, with just native functionality. That’s the thing that’s blowing my mind a little bit is that like, “Oh, I don’t need to… “

Emily Lewis: … have anything installed.

Lea Alcantara: Yeah, yeah, now, that’s really cool.

Brenda Storer: But it’s so true, and I hope that like the more explore and have fun, the more it pushes things forward too.

Emily Lewis: [Agrees]

Brenda Storer: And the more that those things can come in to our everyday work too.

Emily Lewis: Absolutely.

Lea Alcantara: Absolutely, absolutely. Well, before we finish up, we’ve got our Rapid Fire Ten Questions so our listeners can get to know you a bit better.

Brenda Storer: Okay.

Lea Alcantara: Are you ready, Brenda?

Brenda Storer: Yeah, I almost forgot about this part, but I’m excited. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Question 1, morning person or night owl?

Brenda Storer: Morning person. Later in life, I became a morning person. Now, I wake up with the sun, and I can’t help it, so I’ve just embraced it.

Emily Lewis: [Laughs] What’s one of your guilty pleasures?

Lea Alcantara: Pop music.

Lea Alcantara: Oh, I love it.

Emily Lewis: [Laughs]

Brenda Storer: I take dance classes that are learning the choreography to pop videos.

Emily Lewis: Fun.

Lea Alcantara: Oh, I love it. [Laughs]

Brenda Storer: [Laughs]

Lea Alcantara: What software could you not live without?

Brenda Storer: I still couldn’t live without Photoshop.

Emily Lewis: All right, what profession other than your own would you like to try?

Brenda Storer: The only thing I ever wanted to be was a Solid Gold dancer. [Laughs]

Emily Lewis: Oh my god! [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: That’s the only thing that came to mind. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: l love it.

Brenda Storer: The only thing else I ever wanted to be.

Emily Lewis: I loved Andy Gibb so much. I watch that religiously every Saturday night. [Laughs]

Brenda Storer: Oh.

Lea Alcantara: So opposite question, what profession would you not like to try?

Brenda Storer: Oh, I’d be a terrible doctor.

Emily Lewis: [Laughs]

Brenda Storer: Not just because of dealing with the medical thing, but they have to talk to people so much and be on all the time. And to do it well, you have to be personable and they see like 30 patients a day, and I think it would just drain me.

Emily Lewis: All right, if you could take us to one restaurant in your town, where would we go?

Brenda Storer: I live in New York City, and that’s one of the most impossible questions. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Oh my gosh, okay, the first one that comes to mind is The Boil.

Lea Alcantara: The Boil?

Brenda Storer: It is in the Lower East Side, and they give you seafood in a bag, shellfish in the bag.

Emily Lewis: Oh.

Lea Alcantara: Oh, love it.

Brenda Storer: And they give you a bib and they give you latex gloves, and it’s like a garlic spicy sauce and it’s so messy and I have a Garlic hangover the next day.

Emily Lewis: [Laughs]

Lea Alcantara: So I’m flying to New York tonight. [Laughs]

Brenda Storer: Yes, yes.

Emily Lewis: [Laughs]

Lea Alcantara: If you can meet someone famous, living or dead, who would it be?

Brenda Storer: I’m trying to get to the like first person in my head … just Jesus because of curiosity, I want to know.

Emily Lewis: If you can have a super power, what would it be?

Brenda Storer: Flight.

Emily Lewis: [Agrees]

Lea Alcantara: What is your favorite band or musician?

Brenda Storer: That’s also like picking a restaurant in New York City. I have like my top probably three of all time, which should be Erasure, Robbie Williams, and Blur.

Emily Lewis: Awesome. All right, last question, pancakes or waffles?

Brenda Storer: Waffles.

Lea Alcantara: Oooo

Brenda Storer: Always.

Emily Lewis: Firmly waffles.

Lea Alcantara: Decisive.

Brenda Storer: Yeah. I’m so glad. I think waffles are having the moment right now.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Brenda Storer: Pancakes have been more popular and for not enough reason for too long, and waffles are having a moment. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Awesome, so that’s all the time we have for today. Thanks for joining us, Brenda!

Brenda Storer: Thank you again, this was super fun!

Emily Lewis: So in case our listeners want to follow up with you, where can they find you online?

[Music starts]

Brenda Storer: Easiest place to find me is probably Twitter. I am @brendamarienyc. I also have a website, which basically just directs you to Twitter, which is brendastorer.com. [Laughs]

Emily Lewis: Great. This was awesome, Brenda. Thanks for joining us!

Brenda Storer: Thanks again.

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Backup Pro!

Emily Lewis: We’d also like to thank our partners: Arcustech and Devot:ee.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both! And if you really liked this episode, consider donating to the show. Links are in our show notes and on our site.

Emily Lewis: Don’t forget to tune in to our next episode when we’re going to talk about third-party API integration with Solspace’s Mitchell Kimbrough. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 00:57:13