Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris. How are you?

Chris Coyier: Ah!

Dave: First try--

Chris: Darn fantastic!

Dave: I got that on the first try! [Laughter]

Chris: Just for everybody out there, we're going to end up talking probably about SVG a whole bunch this episode. Near and dear to my heart. I thought it was a cool technology for a long time. Maybe it doesn't get as much love as it deserves in the standards community lately, but it's still an awfully powerful language for visual design on the Web and still pretty nicely supported. You can do a ton of cool stuff with it.

I even wrote a book about it at one time. it wasn't... [Laughter] It wasn't incredibly detailed, but it was kind of like, "Not enough people use this, damn it!" was the spirit of the book. And hopefully, it changed a few people's minds.

We have kind of a... I mention that at the top because our guest is wearing an SVG hat. [Laughter] So, that's pretty cool. It's Matt Visiwig. Did I say it right?

Matt Visiwig: You did.

Chris: No.

Jason: Thank you. Well, thank you for having me. And if I had to describe how I'm feeling right now (in three words), all three words would be "excited."

Chris: Aw... That's awesome! Is that your real last name? I feel like you should be the inventor of SVG or something.

Matt: [Laughter]

Chris: That's incredible. I love your name.

Matt: Aw, thank you. Thank you.

Dave: You should at least have your own visual website builder, which - you know - but I'm sure you get that a lot. [Laughter]

Chris: Right.

Matt: I do.

00:01:52

Chris: One of the reasons we had him on is I've been excited to bring on people with clearly some -- whether they believe it or not -- entrepreneurial spirit in turning something that they think is cool... they turn it into money [laughter] at least somehow, some way, whether it's their whole gig or not. I actually don't even know if that's true with Matt.

Matt, the reason I know you (although, I'm sure you've done many different things and probably still do many different things) is there's just a website out there. It's called SVGBackgrounds.com. I think it's really cool and well done. It has kind of a membership program, so obviously, it makes you some money somehow. And that's how I know you, and I think it's cool. I was like, "Let's talk to him about that on the show," so that's the genesis of this. Yeah?

Matt: Yes, I have made money from Chris. He's my one subscriber.

[Laughter]

Matt: No, it does make some money. I've been at it for probably six years now, and so it's slowly been growing. It's not my full-time gig just yet, but that's the hope. Getting close.

Chris: That's the hope? Right on.

Dave: Oh, that's good to hear. Yeah.

Chris: Okay. Well, that's great. Yeah, it's changed a bunch over the years. Maybe tell us (just since we've started with that), what's the story about it? What was the first version like? Why did you do it? How has it evolved a little bit? Just go nuts on it? Again, people, it's SVGBackgrounds.com. Pretty cool.

00:03:18

Matt: Yeah, I've got to set the mood here.

Chris: Yeah.

Matt: This is back in 2017. I end up moving to a new state chasing the woman of my dreams. She's now my wife.

Dave: Aww... It worked... Good job.

Chris: Hey, off limits, Matt. Just kidding.

[Laughter]

Chris: That's a pre-show joke.

Matt: Yeah, and I can't find a job quick enough, and it might be a little something to do with not actually wanting to get another job. So, I ended up starting my own Web design business. And I'm struggling to get clients in the beginning.

Pretty much no income for the first five months, but I tried a ton of different things to get clients. Social media, broadcasting to an audience of zero. Blogging, the same thing.

Dave: Mm-hmm.

Matt: Cold outreach, which sucked. Networking events like in-person, that actually worked the best for me.

Chris: Yep.

Matt: But it wasn't something that works instantly. You get someone who knows you down the road, and then I built a site for charity. And one of the other things I did was built a freebie resource site to hopefully get some traffic and attract clients, and so that resource site was SVGBackgrounds.com. I had good luck that it went viral, but the bad luck that it didn't bring me a single client.

Dave: Aw! So, you had fame but not money (in that sense). Yeah?

Matt: Yeah. I mean I can't complain. It turned into something else, which I think is better.

Chris: So, you're looking for clients. Finding some, but not many. Trying to turn that into money. Do you still do that?

Matt: I do. On my way to transitioning away from client work, but I still take clients. I have a few who send me work here and there. Again, from the networking, I met a few people who run an agency or branding company.

Chris: Sure.

Matt: And they've sent me work over the years.

Chris: Yeah. I wonder if, these days, does it skew SVG, like, "Hey's the SVG guy. Give him that," or not really? Is it just general Web design?

Matt: I think most of my clients have no idea what SVGBackgrounds.com is.

Chris: Oh... [Laughter] Yeah, okay. That's cool. All right, yeah, I don't know. You could say it keeps you sharp, anyway. You know? I don't know.

Matt: It does.

Chris: Yeah. Having some real stakes.

00:05:46

Matt: I started building the tool for myself as a freelancer building websites. Kind of want to be able to just throw up graphics here and there, so I kind of built it with that in mind, like how I use it and just having multiple projects.

Chris: Oh, okay. So, it is officially the classic. You've checked the entrepreneurial box. "I built it for myself."

Matt: Essentially. I mean that's the easiest way to build something.

Chris: Yeah.

Matt: Because you at least know it's useful for someone, and you hope that there are other people like you. I mean I don't think I'm the only freelancing person building websites.

Chris: But not everybody needs... Okay, so what was V1 of this thing like? You're starting to do more and more client work. This thing is a gleam in your eye. Was it filling a gap or something? Why are you attracted to this look at all?

It's somewhat of a specific aesthetic, too. Is it just your style, like when you found yourself when you were building for clients? You're like, "I'm going to have a super cool background." [Laughter]

00:06:55

Matt: I think it stems from having a lot of experimentation. I guess it goes a little bit back. I've been always drawn to vector graphics back into the Macromedia Flash days. And so, I was kind of bummed when that was dying.

But it turns out SVG was going to fill that void, so I started paying attention, but just getting the basics down, so using SVG as an image file. I started to learn how to inline SVG, and I think that's really all I needed.

But then for some reason, I knew there were other ways to embed and use it as an iframe, so I kind of just - whatever. I'm curious. I'm just going to research. And one of those other ways is using the data URI or the CSS background-image property.

Chris: Right.

Matt: So, I kind of dug into that, and there are... There were resources out there but they were kind of technical. There's no easy way to do it. I think I even read an article from Chris. Not like, "Don't use Base64," and just different things on how to do it. So, I started experimenting.

I don't know why I took interest to it. But so, it was really like V1 was more a place for me to experiment. I never built anything like it. I kind of dug deep, and I kept Googling, and there weren't that many resources. But I tried to dig as deep as I could and just ended up building this experimentation site.

The thing that kind of pushed me to actually launch something was, one, the lack of resources and, two, the domain SVGBackgrounds.com was available. So, I thought, "Why not?"

Chris: Yeah. Yeah.

Dave: The perfect combo for stealing a weekend. You know? You know what's funny or what I find interesting? I built SVG to data URI things for CSS, right? But I like how you've taken the full picture.

You're like, "Oh, do you need it as just the SVG, the inline SVG, like an SVG file, or the CSS data URI?" That's... I wish I was that clever. I wish I had thought of that, like, to bring the whole story, have this repository of nice SVGs and then just offer all the download formats.

That's just one gotcha that you don't realize until you're overcommitted to a design. [Laughter] You're like, "Oh, that doesn't work as a background image. Crap. What do I do?" You know?

00:09:33

Matt: Yeah. It didn't start like that on day one. I think I pretty much just offered the CSS and then, over time, added the other ways to export it. I think finally ending with PNG, which isn't used as much but some people do use it.

Chris: Yeah.

Matt: It's just offering a buffet of options.

Chris: I hope they. Get out of here, PNG.

Matt: [Laughter]

Chris: Nobody likes you.

Dave: Who goes to SVGBackgrounds.com and gets a PNG? I want to know. Give me their name and number.

Chris: Yeah. Yeah.

Dave: And I'm going to--

Chris: It puts you on a list is what it does.

[Laughter]

Matt: I built this for Web designers and developers but I think other people end up using it. I know I was on Twitter and connecting with a bunch of Indie Hackers, so they're not necessarily building websites and the like. And there are probably other people doing it for social media, so they just want to copy and paste the graphics they know.

Chris: I know. We're just making fun, really, because SVG doesn't work in email very good either and you could use it there. There are plenty of reasons.

Dave: Video games, it doesn't work.

Chris: Yeah.

Dave: I do think... Well, I'd be curious. I feel like SVG sort of is just this synonym for crisp. You know what I mean?

Chris: [Laughter]

Dave: To most people.

Chris: Right.

Dave: My wife knows what an SVG is. How, I don't know. [Laughter] No, she uses that Cricket machine to make T-shirts, hats, and all the--

Chris: Hmm...

Dave: We don't actually own one. We borrow one from a friend and then she just goes to town. But she'll - whatever - monogram cups and whatever. But she knows what an SVG is, and so she's just like, "I just need an SVG of - whatever - some cool text I want," and she knows how to use the app.

Chris: Maybe because it helps in Google searches. If you put SVG at the end of it, then the image search will be that crisp style that's good.

Dave: Yeah, probably black and white, maybe.

Chris: Yeah.

Dave: But then you get the tiger, the full-color tiger that's on Wikipedia. You know, the important things.

00:11:39

Chris: So, if memory serves... I don't know if I remember the site in 2017 or not. Maybe I do. You know it's hard to remember. But you have this... Right now, if you go to the site and you say "freebies" in the header and say "Free SVG backgrounds," those are the classics.

Matt: Yeah, there are a lot of classics there.

Chris: Yeah. There's one that looks like a roof, kind of - whatever - with these angled slats.

Matt: Is that the pyramid one?

Chris: Pyramids is in there. I forget what it's called. Protruding squares, I guess.

Matt: Oh, yeah, yeah.

Chris: Kind of reminds me of... Yeah.

Matt: That pattern--

Chris: That's pretty niche, but I want to paint the picture of somebody who has been listening and can't quite picture what we're talking about because they can't go to the website right now. There are ones that are as absolutely simple as stripes which, arguably, you don't even need SVG for but some people just want a striped background, and this website is so beautifully easy to use that you could get your stripes here. Why not? Not going to be the worst idea in the world.

So, diagonal stripes, 45-degree angle, two colors, you know, the off-stripe and the on-stripe. I don't know how you would name them.

There's a color picker, too. That's pretty crucial, I think, to the SVG background. You don't just have, like, "Here it is. Here's the SVG background." You often... And there are different controls for the different ones. But stripes, it doesn't even offer angle, really. It's just like, "Pick these two colors," then you get it just how you want it, and then you export it. That seems to be a big deal. Perhaps that was even there in V1, right? That little bit of customizability to the SVGs.

Matt: Yeah.

Chris: Yeah.

00:13:20

Matt: Yeah, V1 had 30 backgrounds, all freebies.

Chris: Yeah.

Matt: Then pretty much those basic options to change the color. There were some simple sliders to change some of the settings.

Chris: Yeah.

Matt: But yeah, just pretty much the 30 ones that you were talking about, the classics, pretty simple stuff like the zigzags and the stripes and waves.

Chris: Yeah. Still classically useful. Probably if you're going to see these in the wild, people love their free stuff, so probably a lot of these out there. And they're nice.

Then who knows. You didn't have any membership then, right? This was just a free site entirely.

Matt: Yeah, pretty much launched 30 freebies, not expectations. I was hoping to get clients, but that was pretty much it.

Chris: Oh, it was. It was like a little bit of a hook for finding clients.

Matt: Yeah, it was all about getting traffic to my freelance website.

Chris: Yeah.

Matt: And it ended up not working at all the way I expected.

Chris: The way you expected. Well, what did happen then?

Matt: I guess when I launched - nothing. So, I hit up a few Facebook groups with Web designers. Someone suggested I launch on Product Hunt. Never heard of it. But I just had the luckiest launch, I guess. I wouldn't say "ever" because other people beat me. But I was like product four of the day, and that led to the site kind of going viral, semi-viral, from zero to 60, you know.

Pretty much, the week after that, I got 40,000 visitors. Again, from zero.

Chris: Wonderful. I'm sure it felt good, right?

Matt: Oh, yeah.

Chris: Yeah.

Matt: I was thinking about what's next, and I was thinking, "Maybe I should monetize that," and so that pretty much took me to the next version.

Chris: Super quickly after V1.

Matt: Yeah, I launched in February and, by April, I had it monetized.

Chris: Two months of free! Oh, my gosh! Wow! That's cool.

00:15:23

Dave: Yeah. What was that process? First paying customer, how were you, like, "Gosh, I know this is worth money, and I know it's $10 a month"? You know? How did you make that decision?

Matt: Well, I thought, pretty much based on the traffic. There were 40,000 in that first week. Then I waited a little bit. I watched how it died down (because that was all from just the excitement).

Chris: Right.

Matt: But because of that, other people linked to my website and, all of a sudden, I was getting about maybe 1,000 visitors a week. That's pretty serious from zero.

Chris: Right.

Matt: I decided I've got to monetize it. Why not? And so, I did. Man, that first Internet dollars is exciting.

Chris: [Laughter]

Matt: It was $5.

Dave: Mm-hmm.

Matt: I think that person unsubscribed pretty quickly. This is subscription-based, and I pretty much launched with 30 premium backgrounds. It was like, once you access that, it's like, "Well, that's not enough to keep me here," so I ended up building and building as quickly as I could and growing the site out.

Chris: Yeah, okay. You probably don't version it like we've been talking about. it's more of an evolution thing, I would assume. But at this point, there's probably - I don't know - 20, 30 times as many pro ones or membership ones as there are free ones, right? If you were going to do some work on the site, you'd, for the most part, make them for paying members, right?

Matt: Yeah, so there are 48 freebies. There are 300 paid backgrounds.

Chris: Oh, 6x.

Matt: A little bit less, but yeah.

Chris: Yeah.

Matt: But all these designs aren't just static. You can pretty much move around some of these elements, some of the slides, and then all of a sudden, it's like a totally new background, so these are pretty diverse. Then there are also other things outside of the backgrounds that I've been getting into.

00:17:26

Chris: Right, right, right. We should get into that, too. So, there are these SVG backgrounds. There are a lot of them. I mean just maybe it's the URL or the branding or whatever. That's how I think of to go to the site. But surely, you're entrepreneurial spirit took over a little bit and is like, "What else then? How can I make this membership more juicy?" That becomes your job then is reducing, getting new customers, but also reducing churn. You know? It looks like icons was one of those ways.

It does seem aligned in that you've now... You unlocked these backgrounds, and you give them to them in a way that, like Dave said, you click it, and you get some code. You copy and paste it over into your own project. That's the same way an icon works. It's very aligned, it seems like, with an offering. Is that what you mean as far as offering other stuff? Icons is one of them but there's more.

Matt: Exactly.

Chris: Yeah.

Matt: Everything else that I offer is SVG-based, and that's the idea is this copy and paste. It just makes everything so quick. Like I mentioned earlier, I built this sort of for myself as a user.

Chris: Uh-huh.

Matt: It just speeds up the process so much because when you're designing for a client, you can show them a few options or you can spend days and days making something look good. Then all of a sudden, you show it to your client to get their feedback and they say, "No." Just one word, they could delete hours of work. So, I've kind of been working on this in a way where, like, just copy/paste, and throw up an option to them. It's easier.

Chris: Yeah. Yeah.

00:19:10

Matt: Yeah, everything is SVG-based. Talking about churn, that's kind of one of the reasons I looked to diversify the offering. When you're building websites, the only thing... You need lots of different graphics. I find that people do need backgrounds here or there. But that might be one or a few for a project and that's it.

Chris: Right. Right.

Matt: Whereas the other types of graphics, especially icons, people gravitate to and need more often. So, that's why I'm investing in building all the different types.

Chris: Wow. That's good thinking, in a way. Yeah, yeah. An icon once a week, maybe, or whatever, over time. Whereas the background, you get it that one time, and you're excited about it at first. Then you're like, "Well, that's just my background now. Next week, I don't need another one. Next year, I might not even need another one."

Yeah, I mean I guess that's good thinking. It aligns with my experience, too, is that I have been a member of SVGBackgrounds and then not a member and then a member again and then not a member. Whatever. When you're looking at your expenses, you're like, "Yeah, that one could probably go." No shade, but it was like I just don't need that right now. I guess that has become your job is to make sure that I keep my subscription because there's other stuff on here that I need more regularly.

Matt: That's the... Yeah, that's the whole idea.

Dave: I like, though, you're scoping it to SVG. Right? So, I do vector graphics, whatever vector graphics can do well. Icons. You have cursor hands, which is cool, custom cursors, and then background images.

It seems like you would have it pretty... I don't know, a well-defined process for generating new stuff. You could crank out - whatever - 20 backgrounds in a weekend and repopulate some new thing - or something. You know? Just kind of... Not like generative AI style or anything, but maybe. I don't know. I'm not your boss. [Laughter]

But at least you could get into this sort of rhythm where you're just like, "I'm going to sit down and add more to this." That's kind of... I don't know. You're not switching a bunch of tools. It's all Illustrator or all - whatever. I'm sure you're like, "I use freehand," or something. [Laughter]

00:21:40

Chris: What do you use?

Matt: Yeah, I do use Illustrator. And that, you pretty much touched upon another thing. So, I made this change, this pivot into offering other graphics pretty much a year ago, and so building it in Illustrator and then throwing it into VS Code because I actually do optimize everything, just like the hand-coded stuff is always better.

Dave: Ah, man! Now you're speaking my heart. Keep going. I almost "fixed" (I say in air quotes here) an SVG this week. It would not have been a fix, but I was like, "That's a lot of points for an X," was going on in my brain. I was like, "I could fix that," but I said, "No, that's not my job."

Chris: X is the perfect nerd snipe. You're like, "Oh, there are eight points on the outside of that X and four points on the inside. It should be a 12-point thing. I can just use the polygon element." No, Dave! No! [Laughter]

Dave: No, I'm going to hurt myself.

Chris: Or better. Just do it with just two lines, and then you can use the SVG properties like - whatever - line cap to round the edges.

Dave: Mm-hmm. Yeah.

Chris: If you want, yeah.

Dave: But--

[Laughter]

Dave: But... Well, but I was going to say, your SVGs, though, have... You can adjust the stroke because it's all variablized, right? It seems. And so, that's something I wouldn't do, and I would mess up, so that's kind of cool.

Matt: This is for a bunch of different designers and developers, so everybody has different styles. So, I try to create in a way that makes it easy to adjust to your liking, so you can change things like stroke. It's really per set, so where some icons are made by fill, so you can't touch the stroke. But others, you do touch the stroke, so you can adjust the size. I think cursor is a good example. you can adjust how thick the lines are. Even the size, so when you export it, it's ready for the cursor CSS property.

Chris: Right.

Matt: Yeah, this is really built... This is like stock graphics for Web developers and Web designers and all that.

Chris: Yeah. It feels like it's almost targeted at somebody who doesn't even want to know how it works, really. [Laughter]

Dave: Mm-hmm.

Chris: Like, "Just give me it. I'll just use it." Oh, that's cool.

00:24:16

Chris: All right, so let's cover... Just so people know what the list is. Sure, it's SVG backgrounds. Those are there. There are icons. There are icons in different sets. As Dave mentioned, there are cursors. That looks new, so congratulations. Got a nice release there.

Matt: Yeah.

Chris: There are what you call doodles, which is all kinds of... I guess they're not quite icons because they're - I don't know - a little more... The arrows section has all kinds of, like, hand-drawn kind of arrows. I guess you could think of it as an icon, but perhaps a little too detailed or meant to use larger than an icon or meant to use more as a one-off than as part of a system. I don't know how you distinguish an icon from a doodle, but yeah.

Matt: Yeah, decorative designs.

Chris: Which include circles, geometric shapes, underlines. Yeah, really cool. Then there are some preloaders, blobs, and quotation marks is even a whole category, and there are just tons of them. So, pretty cool.

Matt: Yeah, and I'm trying to add something new once a month.

Chris: Yeah? Okay. Yeah, that's nice. Get something out of the subscription. Yeah, it does feel like you've crossed a chasm, though. There's a ton of stuff on here, so I don't think people probably feel the edges of it quite so soon right after signing up. I would think the feeling is already like, "Wow, there's way more here than I would ever use," which is probably where you want to be.

Matt: Yeah, exactly. I pretty much learned that instantly when I got that first few customers. They're like, "There's not enough. There are only 30 backgrounds. This is not enough to stick around."

Dave: Mm-hmm. Mm-hmm.

Chris: Yeah.

Dave: You're like, "What if there are a billion more?" [Laughter]

Chris: [Laughter] Yeah. I mean I'm sure... Not that this should dissuade you from doing new stuff, but there probably is some diminishing returns on, you know, if I made five more backgrounds next month, am I going to sell any more accounts? Maybe not. You know? I don't know. It depends on how you market it, I guess. If making those five then turns into marketing materials, and the marketing materials sell accounts, well then maybe it was worth it.

00:26:22

Matt: At this point, it's more about keeping customers, so I do allow people to request the backgrounds that they want.

Chris: Oh!

Matt: That's also useful because--

Chris: Really?

Matt: --they're asking for something that's going to be used for a real-life project. And so, that helps bolster the collection. But I'm doing stuff to keep my customers.

Like you said, if I do add 20 new backgrounds, is that really going to make more sales? I don't really know. But keeping customers is definitely a lot more ideal. It's harder to get new ones than to keep old ones.

Dave: Yeah. Yeah.

Chris: Yeah. But that keeping old ones, I'll tell you, it's been a focus of my life for many years. You know? [Laughter] It's funny.

If you have a business that you sell 20 accounts a month, but 20 of them leave, you have a flat business. Yeah. Yeah, keeping the old ones is super clutch.

Speaking of getting ones, this is just one that's on my list is that I wonder how interested in the SEO game you are. Early on, you had that big surge in traffic from self-marketing through the help of, I guess it was, Product Hunt in this case. But then you got links and things like that and that established some traffic. At what point--? I would say your URL is probably doing a decent job for you there, the name of the site. You probably rank pretty okay for that. But are you interested and do you play the SEO game, as it were?

00:27:59

Matt: Yeah, so I do take part in this game.

[Laughter]

Matt: Early on, I got lucky. One, the domain did play a good role. From that launch from Product Hunt, I got some good links, like CSS-Tricks, maybe SitePoint, just some random links, but everybody was using the anchor tag SVGBackground, so I do rank very well for that term.

Chris: Yeah. It's going to be hard to unseat you for that one. It would be near impossible, I'd say.

Matt: Yeah, and then I started targeting other things. I'm not really good at outputting lots of articles here and there, but I've launched a few things.

I think the one thing I've been doing lately is trying to release all these different types of SVG graphics because I do rank well for SVG. And so, I did SVG cursors, animated preloaders, so some of those things are starting to bring in a little traffic. It definitely grows over time, so definitely playing that game.

Chris: Yeah. It does seem like it. You have the blog. The blog is good. It's pretty straightforward. I don't know how I landed on it, but there's a post from years ago that's just really, really basic. It's just how to add SVG backgrounds to WordPress. That is the exact title you need because there are all these WordPress users. They're going to Google stuff like that. Why not deliver on that?

Then it links to other blog posts that are a little more specific about things. Then you write, and it's just really clear and straightforward how-to thing for that. I would think at least half of the point of you writing that article was to capture some SEO action.

Matt: Exactly. It's boring to write all these different things.

Chris: Mm-hmm.

Matt: I don't know if you guys feel the same. But it's just kind of necessary to do it.

Dave: Yeah. Yeah, I mean - I don't know. The corporate blog is a tough space. We were talking to Jason Grigsby last week, I guess. He does a great job with the Cloud Four blog, but it's almost like an extension of what they're interested in that also applies to their business. You know? There's an honest feedback loop. It's not just an SEO grab. I feel like that's going to ruin your brand probably harder and faster than even just being a scammy SEO site. [Laughter] Just being an inauthentic blogger is maybe worse. I don't know.

Matt: It's tough these days. You're competing against people who use generative AI and just throw up content. People who try to even target competitors and just feed that content right into the AI.

Chris: Right. Why our hosting is better than Vercel - or whatever. Didn't even write it. Just got it... Yeah. We're yet to see how this is going to shake out, but we are in the middle of it.

00:30:56

Matt: One of the things I'm also doing is kind of migrating to YouTube. I'm starting to post more videos there. I think it's going to be harder.

There are people using generative AI to make these crappy videos. But I think just appearing in them and doing a tutorial is harder to beat. I mean you probably can, but I think that type of content is going to hopefully do well for me.

Chris: I get what you're saying. It's authentic. Of course, it's authentic. Look at my face. See my face? That's real. Come on.

Dave: For right now.

Matt: [Laughter] Right.

Dave: For right now. You could just be talking to Sora right now. We don't know.

Chris: It does kind of feel like... Do you think we're headed towards a place where you can watch a YouTube video and really just have no idea if that person was real or not? Ugh!

Dave: I think it's pretty close, but I don't know.

Sorry. This is not about SVG background. I've been on ad-supported YouTube for a while now. Just trying to it out. Trying to curb the YouTube habit. It's awful. It's making the world stupider, and there are a lot of, like... You can see the funnel.

I had AI generate a script, and I had AI go find B-roll that matches the script (or generate the B-roll), and then I had AI stitch it together. There are so many ads like that.

Chris: On, that's what the ad is? We have the budget for the ad, but just then after we spend the money, we're just going to make the crappiest junk ad.

Dave: Yeah. Well, and it sounds like the TikTok lady, like, "I bought five gallons of makeup at the store. Oh, it was all bad. That's why I feed my dog healthy food." You know? It's just this--

Chris: Wow!

Dave: It's awful. Yeah.

Chris: I feel like if I had the money to run an actual campaign on YouTube that I would make the ad good.

Dave: Yeah. Oh, for sure. If you're going to pay to get in. But I don't know. Maybe it's these people are just doing the old, like, "I'll be filler." That's an ad rate you can get is, like, "I'll be when you have no ads to serve. I'll jump in there." You know?

Chris: Hmm... Oh, yeah. They paid a cent for it. Yeah, what do you got, Matt?

00:33:10

Matt: As a creative, it's hard not to put energy and effort into the things that face customers and all that. You can definitely get outpaced by the people who easily will just throw up filler and all this AI junk.

Dave: I think to really hit it out of the park, you've got to do the, like, "I made a million dollars a day making SVG backgrounds," and you've got to do the "I make money" story and then that boosts your following. Yeah.

Matt: One second. Can you slow that down? I'm taking notes.

Dave: Yeah. Yeah. Yeah, I've got ideas for you. Every time a new operating system - I don't know - Apple - comes out, you just make a background that's not a copycat but is just very similar to the new wallpaper they're offering. [Laughter]

Chris: Hmm...

Matt: Genius.

Dave: Then you have OSE backgrounds.

Chris: Wow. I kind of don't hate it, honestly.

[Laughter]

00:34:09

Chris: How much is it?

Matt: Right now, pricing plans are $15 a month or $120 a year. This is for one designer. There's a team plan that's double that. You can get up to ten designers with a team plan.

Chris: Oh, I see. So, you're generous on the team account. It's cheaper per user.

Matt: Exactly. I actually just released this maybe a few months ago, so I'm trying it out. I've got a few bites, so definitely keeping it up to see what happens with it.

Chris: Okay. Yeah, this fascinates me in all our research. We have team plans as well. I think our instinct was to be cheaper with team plans. You're like, "Team plans are great. I want to do everything I can to incentivize team accounts." Sometimes making them cheaper is good.

But that logic doesn't seem to flow, generally. It might for you. Your business is different - whatever. But there are a lot of companies, and we look at stuff like Vercel and Netlify. It's more money per seat to be on a team. It's more.

Matt: They probably have a lot more features geared towards those team plans. I'd hope.

Chris: Maybe.

Matt: Yeah.

Chris: I also just think we just need to be on a team. That's a requirement for the business. The people who tend to buy teams are companies with money, and they're just like, "Whatever." They don't even look at the price. They're just, "It's just money. It just goes on the corporate card." Whatever. A little anecdote.

Matt: Yeah, there are products that offer everything free for individuals in the hope to gather people who end up on a team and introduce it to their team.

00:35:48

Chris: Right. Yeah, that's their strategy. Pretty funky. Okay, that's cool. So, it's $15 a month, $120 a year.

What powers the membership stuff then? Did you code that? Did you pick something off the shelf?

Matt: I picked something off the shelf. Yeah, so when I first launched without monetization, it was just plain HTML, CSS, and a little bit of vanilla JavaScript. Then I added my own PHP routing, so you wouldn't see .html.

Chris: Yeah. Yes! I just love that. The reason we use PHP was to get rid of the file extensions.

Matt: Exactly.

Dave: For HT access, yeah.

Chris: Hell yeah you did. [Laughter]

Matt: Then ended up going to WordPress so I could use a plugin to handle e-commerce. I have no interest in reinventing the wheel, so I ended up with MemberPress, and I'm quite happy with them.

Chris: MemberPress.

Matt: Pretty much the one feature... I mean there are other features, but just being able to create my own theme in WordPress and then they just pretty much have a function that says whether the logged-in user has access or not.

Dave: Mm-hmm.

Matt: I mean that's pretty much, it's just a simple condition.

Chris: Yeah, that's what it all boils down to, isn't it? One little logic gate.

Matt: They handle a lot of emails and just the payment checkout system. It makes it so much easier.

Chris: Sure. I'm sure rebilling and all that stuff, right?

Matt: Exactly. Recurring, yep.

Chris: Updating credit cards and all that. Pretty important. Pretty important stuff. Okay, so it's WordPress. Somehow I wouldn't have guessed that. I don't know what I would have guessed. Maybe one of those bolt-on ones that work with any CMS - or something. But no, it's WordPress. Okay.

Matt: Yeah. I just ended up going with what I knew.

Chris: Like the whole monte, too, right? Every page of it. There's not WordPress and anything - or whatever. There are plugins, but if it's a URL and it's on SVGBackgrounds.com, it's a WordPress?

Matt: Exactly.

Chris: Hmm...

Matt: I do use... The user interface for manipulating the SVGs is custom-built by me. I did use a few libraries. There's Chroma.js, which handles the color logic. It can make some... You could pick two colors, and it can give you the colors between it and make them beautiful. Like if you do a gradient in CSS, a blue to a yellow, you would expect a green, but it gives you a gray.

Dave: Mm-hmm.

Chris: Uh-huh.

Matt: Chroma.js can help you.

Chris: That's part of the whole deal with the different modes, like LCH and all that.

Matt: Exactly, so LCH. You can get some really nice rainbow colors in there. And so, that helps with that. Knowing the contrast between two colors and just different logic, so it's easy to add some nice colors based on one color you pick on my user interface.

Chris: That's fascinating. Yeah, I'm looking at some of these. There is a natural gradient, like some waves. Then in between the wave is a little darker because of a fake shadow, essentially, that's happening. You don't have to pick the fake shadow color.

Matt: Exactly.

Chris: It's just in there.

Matt: Trying to make it easier on the user just so you only have to pick one color.

Chris: Wow. Yeah, and you don't get the benefit of other color models like LCH and LAB and stuff. Those don't work in SVG, do they? Have you messed with that yet?

Matt: I'm not sure. But yeah, so pretty much everything gets exported as RGB. But the logic (picking those colors) are based on those different color modes.

Chris: Oh, interesting. Okay. Cool. Wow, so that's one of the libraries used here. The little UI does look rather custom. They're input range sliders, but they're customized, clearly. That's your own little thingy you built. Oh, it really is a range slider. Nice. [Laughter]

00:39:47

Matt: Yeah. Definitely tough to customize, but picky. The other library I use is JS Color, which is a color picker. Hard to find one that I really like, but it just gave a lot of options.

Chris: Yeah.

Matt: I think one of the best features is that it allows you to have this color history. As you pick new colors, it populates, and so I kind of hijack that, so it does that. Or you can input your own brand colors, and so it will store those when you load up the page.

Dave: Yeah.

Matt: So, you don't have to enter your hex each time.

Dave: Like pre-populate, or your users can set their own brand, right?

Chris: Is it local storage, or do you chuck it in a database?

Matt: Yeah. Yeah, it's in the database.

Chris: Oh, really?!

Matt: Yeah.

Chris: Good for you. Even in WordPress. [Laughter] Did you have to make a custom table and crap?

Matt: No, I use ACF (Advanced Custom Fields), so they have a color picker component, so I just gave... I think it was a repeater. I put ten in them, so you could choose ten colors, enter them.

Chris: Yeah.

Matt: And then save to the user, and then pull it out.

Chris: To the user? ACF can do that? Oh, damn! Good job, ACF. That's fantastic. And you kind of don't even know what's happening, right? If you pick a color just from any given one of these backgrounds, maybe one of them has three colors. It'll just change one. Or no, you're talking about the little strip of colors at the bottom of the color picker, and those are the ten that you get?

Matt: Yeah, so there are two different ways. There's also a little radio where you can either have it be what I call color history, so as you populate new colors, it adds those colors that you just used, so like the history.

Chris: Okay.

Matt: You could turn that off so it just shows you your brand colors. As you choose new colors, it just stays to your brand colors. But that's in the user settings.

Chris: That's nice. Yeah, that's been a classic, as we've talked to people that build tools like this. We have another one later that we're recording with a guy who makes a Sudoku app, so there's a little teaser. We never do that, Dave, tell you what's coming on the show.

Dave: Never teased before because people cancel. [Laughter]

Chris: I know. Dude. Wow.

[Laughter]

Chris: Very risky move I just pulled there.

Dave: Yeah. Whoa! Whoa!

Chris: But it's fascinating how many little, tiny, little options there are in the app that are just really specific little things. That's one example that you've tucked away, right? Only brand colors. What a niche thing but cool. I'm fascinated how people decide that type of thing.

00:42:37

Matt: I had a few requests on just making it easier to input colors. And so, after I got a few of these requests from various users, I definitely listened to them. And so, I thought about it because also, after I added this functionality, it's something I use myself to input my brand colors. It just makes it so much easier to peruse the different backgrounds and just being able to change to your brand color.

Chris: I finally see it now, and it took me a minute. You have to go under account, and then there's a whole thing called "the color manager." Oh, my God. I love this.

Matt: Yeah.

Chris: I was literally going to ask you about this and be like, "Have you thought about--?" If I log in and I know that I always use this purple, shouldn't it just be there for me? And you're like, "Yes, you should use the feature that I fricken' built just for that."

Matt: [Laughter] It's tough.

Chris: [Laughter]

Matt: That's definitely something I want to do better. I just added this email sequence for onboarding. One of the emails explains this.

Chris: Yeah.

Matt: But I do get a lot of requests for this feature that's already been built, so I could do a lot better telling people about it. It's tough.

Chris: You know what I would do? Just saying. Every color picker that you open, just a little link at the bottom. It wouldn't even be annoying. All it does is open it in a new tab.

Matt: I would add this.

Chris: Like, "Open color manager." Why not? Then I'd be like, "Oh, crap! I can manage these colors?" Jobs to be done, baby.

Okay, so what did we talk about? We talked about SEO. We talked about membership and how it's powered. One of the things I like about it that I'm jealous of, in a way, is that you get to have a membership program that people pay for but you don't have to deal with files or shipping. Shipping is a whole other thing, if you had product inventory and you're selling a product. That's a whole big pain in the ass. You know?

Then those people are jealous of people that just sell digital products. You have a course, and you sell video downloads or stock audio clips or something. But even then, you have to deliver that crap. You've got to put them somewhere protected online. You have to unlock the access to it. Maybe those are in an S3 bucket or something, and then you've got to figure out bucket permissions and crap on all that.

You've managed to get your way out of that, too. You don't even deliver any files. You just copy and paste it right from the browser. That's so juicy. You have this product that it's like it can never break - kind of. Nothing can go wrong with this thing. It's almost like a static website, it's so cool.

Matt: I don't think about it like that, but I guess I'm really lucky.

Chris: You are officially lucky.

00:45:23

Dave: I love your choice in WordPress, too. It would be real easy for Dave Rubert to be like, "This needs to be a Rails app on Supabase," and just overkill city on what it needs to be. I think this is just the right amount of sticking to your wheelhouse. You're like, "I knew WordPress, so I made a WordPress." Maybe in 100 years, you'll be like, "Man, WordPress is not the right fit." But probably 100 years, literally.

Chris: It would be a while. Yeah, especially seeing how... I think they would be proud, too. This does seem like a quite not WordPress, WordPress site. You know? Not all the time, but I feel like I can sniff them out pretty well after two decades of building crap on WordPress. This does not feel like WordPress.

Matt: Well, thank you.

Chris: I don't know if that's... Yeah. [Laughter] I think that was a compliment. Yeah. Not that I would be giving you anything otherwise.

Dave: It's giving Laravel vibes.

Chris: [Laughter] Yeah.

Dave: Yeah.

Chris: I don't know what it is. I would have guessed just some static site generator or something. Okay. Then do you think much about the competition and stuff? I'm sure you can't help it to some degree. But it seems like some of the stuff in the same category as you is on a different scale or something.

I think of the Noun Project - or something - which I also subscribe to because I often need icons. I'm afraid to tell you they have about 15,000 times more icons than you have available. But not that you need that many necessarily, but you're not going to have as many icons as that ever, probably.

Matt: No, I don't think so.

[Laughter]

Chris: Yeah.

Matt: I'll be honest.

Chris: But you don't have to care. I'm not trying to give you anxiety or anything, but how do you think about stuff like that?

00:47:24

Matt: Yeah, I mean there are a lot of big players in the stock graphics category or industry, the big players like Adobe Stock.

Chris: Yeah. Even like Unsplash.

Matt: ...market.

Chris: It's free.

Matt: There are all these different categories, and so after building for myself this Web design tool, I think sticking to that niche is good. There are definitely going to be players who offer a lot more icons than me. I think I want to just be more of SVG all-encompassing types of graphics and stick to that.

Chris: Yeah.

Matt: I'm not sure that anyone else is offering that right now. And maybe there will be, but I think I could do a good job with what I'm doing and I'm going to stick with it. It's been working out.

Chris: It doesn't even look like you've touched filters yet. That could be a whole thing for you. SVG filters are whack.

Matt: I messed around with them a little bit. I got scared away a little bit with performance. But I really don't know too much about it. But I was making some mesh-like gradients because you can do that in Illustrator, but it doesn't translate to SVG. So, I was just using radial gradients and kind of layering them to make these mesh gradient-like backgrounds.

Chris: Nice.

Matt: I added a nice static-y filter to it. And it looked super cool, but I just noticed I would load it on my browser, and it would take... There would be a delay for the static to show up.

Chris: Oh...

Matt: I probably could figure out something, but that's kind of why I didn't get into it.

Chris: Yeah, I could see that.

Matt: It definitely is in the back of my mind because I do... There are a lot of cool things you can do with them.

Chris: Yeah. You could even start with the simple ones. One of the ones I always reach for is duotone - or whatever. That's pretty unique ability of SVG that it takes in color channels, and you can map them to other channels. I'm not even sure if I'm articulating that correctly. But you can take a color or black and white image and make it two-color.

That is such a cool look. You know? It comes back in vogue once in a while. But I could never... Even though there's a pretty good CSS-Tricks article on it, it's not the same as just a code generator, like, "Just give me the code!" There are a lot of people that just want the gosh darn code. Anyway, that's just--

00:49:45

Matt: Well, you guys have given me some really good ideas to take away.

Chris: Good product ideas? Sure.

Matt: We've got SVG filters to think about. I need to add a link to the color manager from my color history or picker.

Chris: Yeah, yeah, yeah.

Matt: And then I also need to steal Apple's backgrounds when they launch new iOS devices.

Chris: Yes, that's one. And just put an enterprise plan on there, too, and just make it weirdly expensive, just like triple the price. Just put it on there just for fun. See if anybody buys it. [Laughter]

Matt: Why not?

Chris: That's a good one. Yeah, why not?

Speaking of performance, I stole one recently. If you go to the Frontend Masters blog, Boost, I was just going to chuck some meteorites on there in the upper left. I hardly did anything. It's just ripped right off from SVGBackgrounds.

Matt: What's the site frontendmasters.com?

Chris: Boost.

Matt: Boost.

Chris: Yeah, or just click the blog link there. I helped them out when setting this up, and I was like, "We're going to put some fricken' meteors on this thing."

Dave: Ooh...

Chris: That was my recent subscription. That was just ripped directly off from SVGBackgrounds. I can't say ripped off because I paid for the subscription and used it in the way Matt intends me to use it.

Matt: Quick question.

Chris: Yeah.

Matt: When did you add this?

Chris: It was - I don't know - months ago.

Matt: Okay because this one might be broken. I just fixed a bug. Someone reported that this doesn't work in Safari.

Chris: It does not. I had to literally use a check for Safari. I just show a PNG instead in Safari. You fixed it?

Matt: Yeah, it's fixed as of yesterday.

Chris: Yesterday.

Matt: Literally just fixed this. Yeah.

Chris: Well, thanks for letting me know.

Matt: For some reason, Safari doesn't like nested use tags in nested use tags with animations.

Chris: It worked. It just was really janky. It just, every five seconds, would update the positions of the little meteor guys.

Matt: All right. Well, hopefully, it's fixed now. Let me know.

Chris: Yeah, I'll try it. It would remove... I did something that we probably told people 100 times on this show not to do, which is UA sniff, which is trying to guess from the user agent, which this has been increasingly difficult to do over the years. Just try to make an educated guess if you're in Safari or not. Add a class to the HTML element, and then I have a CSS opportunity, basically a logic gate to do something or not do something. It's just like, "Eh, screw it."

I had the logic gate in there anyway. Because this is animated, there is already a logic gate for prefers reduced motion that switches it to a PNG. I was like, "prefers reduced motion," or Safari. [Laughter] I do it for mobile, too. At a certain breakpoint, I flip it out for a PNG because I don't think you need to be seeing... It just seems like--

It scared me off, the Safari thing. I was like, "I bet this is a little heavy, a little battery eater, maybe," so I turned it off for mobile, too. Anyway, it's a beautiful one, and thank you because it's a cool one.

Matt: Oh, thank you. It looks nice. I think it looks great.

Chris: Now people will know it wasn't my design chops that pulled that off. I just stole it. Made it the brand colors, though, you'll see. I used them.

Matt: Yeah, it was beautiful.

Chris: Updated those colors. I do find myself... I feel like more often than using your color picker, not that I would ever suggest removing them because you should definitely keep them, but I usually just download whatever you've got and then I change the colors once I have the code. I'll put in my own variables or something. I'm sure you--

Matt: No, that's a good way to do it.

Chris: People do that anyway.

Matt: I think I do that myself sometimes. You throw something up on your website and be like, "Eh, let me tweak that." It's just nice being able to actually do that in the code.

00:53:42

Chris: Your SVG skills must be on point because of this, right? There's probably not a day in your life you don't think about the SVG syntax in some way.

Matt: Yeah. I think it's pretty good. That's why I got the hat.

Chris: [Laughter]

Matt: There's a lot of experimentation. I think I've been working on various graphics and backgrounds. Everything is SVG for the last six years, so on occasion there's stuff that will throw me. But I know how to look it up and figure it out.

Dave: When you drive around websites, do you feel like people are missing opportunities to use SVG, and what would those be? Were you like, "Ah, man. They should be using SVG"? Do you ever think that?

Matt: Yeah, I think everyone should use SVG.

[Laughter]

Chris: Every second of my life.

Matt: Back when I launched the website, I think nearly 5%, maybe 10% of websites had SVG. As soon as I launched, that number went up. It's probably nothing to do with me, but I like to think it has something to do with me. Just maybe the timing.

Dave: Absolutely, dude. Yeah.

Matt: But now it's a little bit above 50%, so that means nearly half of websites don't have an SVG. I think logo is the real candidate. It just scales on whatever, like responsive design, and you can do cool hover effects with it. I think that's the obvious--

Chris: Step one, logo. Step two, favicon. Step three, background. [Laughter]

Matt: Yeah, yeah, yeah. Exactly.

Chris: That's nice. Just to go real deep in the weeds -- we've got to be done here in just a second -- I got an email from old Doug Shepherds who said, "I'm delighted to report that a small but nettlesome problem in SVG has now been solved in browsers as of last month. Markers can now take on the color of the host line." I barely even know what he means there, but isn't marker is an actual SVG element, isn't it?

Matt: Actually, I have no idea.

[Laughter]

Chris: I'm not sure I do either.

Matt: we're talking about how much of an SVG expert I am and, yeah, no idea. I've never needed to use that.

Chris: Yeah. It doesn't seem like... It's probably more useful to not the kind of work that you're doing. I think it's for charts and things like that.

Dave: Hmm...

Chris: It's like the dot on a chart is a marker (for some reason), and it had some coloring problems. Anyway, yeah, I mostly brought that up to be like, "Are you the kind of guy that pokes at browser vendors?" In the GitHub boards for the SVG conversations, be like, "You know what I really need is this for SVG 2.0," or whatever. [Laughter]

Matt: Are we going to get an SVG 2? Do you have any idea?

Dave: Hmm...

Chris: For a long time, there was supposed to be an SVG2, I thought. I think it kind of died, so I don't know. I think we get evolutions of it instead.

I heard Leigha Verou say something the other day. Maybe she published it. I can't remember in the context I heard it, but she was just like, "At the moment, we won't even touch it." If you have so much time in the day and you're a standards person, just don't even... Even if SVG really needs something, don't even waste your time because it's not going to go anywhere. Isn't that a bummer? Even if you really want SVG to evolve in some certain way and you're the person who can articulate it and push it through a standards process, it's not going to happen anyway, so just do something else.

Dave: Hmm...

Matt: That's--

Chris: It sucks--

Dave: Rough.

Chris: Yeah. Well, anyway. That's a bummer way to end it.

Dave: Hey, well, I was going to say one--

Chris: Let's do it, Dave.

Dave: My agency, Paravel, Web famous for grunge, right? Making your screen look like there's something wrong with it.

Matt: [Laughter]

Dave: I found this... It was probably on CSS-Tricks, but this SVG grunge trick, right? It was just like... We got really good at grunge, compressing it down to a five-kilobyte repeating image that doesn't show lines.

Chris: Yeah. Mm-hmm.

Dave: Or maybe it's 30 kilobytes if it's a funky set of colors or something or big and needs a gradient. But the SVG is like 200 bytes. Then you just have a CSS background color or a linear gradient or something like that. It was so powerful. I don't think we ended up using it, but I just was like, "Oh, man. That's one way I just wish people knew more about. We could really start putting some salt on our websites." SVG doesn't just have to be clean-cut, crispy graphics. It can be, like Chris was saying, the filters. It can really fuck up a website.

[Laughter]

Chris: Yeah, they are opposed to how you normally think about SVG. Usually, if a filter is involved, it's doing something that feels un-SVG-like.

Dave: I saw one do, like how you do the chroma shift, like into the spider-verse style. You have the offset print colors. Oh, my God! Let's do that! I'm kind of on a tangent, but it is this big, crisp, beautiful graphics, but it can also be a really cool, unexpected tool to just rip a website to shreds. I think we should start exploring that.

It was a really weird. You have to inject an element somewhere and then reference it and whatever. But let's have fun. I don't know. That's my encouragement. SVG is cool.

Matt: Well, you definitely inspired me to experiment more with those filters because I've played around with them a little bit. They can achieve some really cool effects.

Dave: Yeah, and you have a thing, like, "Hey, you want funky headline machine? Here you go." [Laughter] "Use this and use it like this."

Chris: Right. You're in the business of selling solutions to problems that people don't... They just want the code. They don't want to think about. Even if it's a little niche, that might be... It probably won't be your top seller, but it might be one that would keep people around. Like, "Ooh, yeah. That's that place I go to snag that filter code."

Dave: Yeah. Well, cool.

Chris: All right, man. We've got to wrap it up.

Dave: Yeah, we've got to wrap it up. Matt, thank you so much for coming on the show and telling us about SVG. For people who aren't following you and giving you money, how can they do that?

Matt: Well, we've been talking a lot about SVGBackgrounds.com. So, if you're interested in SVGBackgrounds.com, just go to www.svgbackgrounds.com. The other way to find me, though, is YouTube. You can find me at @mattvisiwig.

Dave: Perfect. Awesome. We'll hopefully get some subscribers headed that way.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Mastodon because that's the cool place. And join us over in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Oh... ShopTalkShow.com.