Interview with Matt Lipman creator of SVG Backgrounds

Today I would like to introduce Matt Lipman creator of SVG Backgrounds

Hello Matt, Please tell us a little bit about yourself?

Hey Iain, thanks for having me! I am a professional web designer. At my core, I’m creative. I’ve had phases where I’ve been into playing music, composing music, developing games, making puzzles, drawing, painting, designing art, designing Halloween costumes, you name it. My passion for being creative lead me toward the intersection of code and graphics, where I’m focused today. When it comes to hobbies, I try to get away from the computer: I play volleyball and enjoy hiking.

At what age did your interest in computers and computer programming start?

Getting into programming was a journey, rather than one decision. My family got a computer in the days of AOL, and one software stands out, in particular, was Fine Artist. I remember playing around with this software a lot, way before I knew about graphic design, which is what got me into web design. I built my first website in my freshman year of college (2003) using Microsoft Frontpage. The site was a personal project to promote my music. I recognized the website was bad and worked at improving multiple times.

I graduated college with a music degree that didn’t do much for me and ended getting a certificate in graphic design. In my early entrepreneurial endeavors, I landed my first web design gig off of Craigslist for $75.Woo! I also co-founded an online puzzle website in 2007 where I made flash games, which is really where I started to self-learn programming. This also happened to be my first WordPress website, which is the platform I use for client work.

Could you tell me about your day job and how you got to where you are now?

I run a web design business full-time called Bump Set Creative, which is nearly 3 years old, but I’m pivoting away to work on visual tools which I’m sure we’ll get to shortly.

How did I get here? I already mentioned that I got a college degree in music, then a graphic design certificate. The online puzzle business was a two-year project that didn’t pan out, and eventually, I got a part-time job in 2010 as a web and graphic designer at the local Chamber of Commerce. It quickly turned into a full-time job. My work was seen by an established local creative agency, and I got invited to talk to them. I turned it down because I was so comfortable at my current job and looking back that was a huge mistake.

Our field requires constant learning and you always want to better yourself. I did that at a really slow pace at the Chamber, where I worked for 7 years. I left that job because I was moving to another state and two factors led me to start my own company: 1) was having a hard time finding a job and 2) the entrepreneurial bug was getting to me again. It was rough, my first four months on my own produced \$0 as prospects kept falling through my fingers. I eventually made a few connections through networking that produced enough work to float by, and I landed two bigger projects that extended my runway. At the end of the day, running a web design business taught me many lessons, but I don’t like wearing all the hats (marketing, client relations, accounting, etc). That’s why I’m pivoting away.

What inspired you to build SVGBackgrounds and how would you describe it to someone who may never have heard about it?

SVG Backgrounds is a website with a collection of backgrounds, where you can customize things like color, size, position, scale, opacity, stroke… etc. and it outputs as CSS or a downloadable SVG file. There are 50+ free backgrounds and 150 premium designs available for purchase.

As a graphic designer, I was always disappointed that vector graphics weren’t consistent on the web. Flash allowed them, but it had a long drawn out death starting at the rise of mobile phones. Once the format SVG started to play well with browsers, I took an interest in learning how to use them. A year or two later, I looked into how to add SVGs as a background image and saw you could add it as Data URI or in simple language, as image code without the need for a file. I read about it, because, to this day it’s not a straightforward process. It’s easy to add an image file to HTML, but it takes technical knowledge to create Data URIs. Looking into it, I realized there weren’t many resources, the name SVGBackgrounds.com was available, and I thought it would be a good way to learn to use them.

After experimenting, I decided to build a site and drew inspiration from TransparentTextures and SubtlePatterns (some of my favorite graphic resources I used in the past). A month or two later I launched SVGBackgrounds.com in Feb of 2018. A week later it blew up on ProductHunt, and with the great reception, I decided to create a monetized version which launched months later. Sales started to trickle in and I kept building the collection out to 200 backgrounds. I still don’t make enough to live off this as a business, but, I did realize making a product can be way more profitable than placing ads on your website. After this experience, I’m motivated to create more creative tools with the hopes of doing so full-time.

What is the tech stack behind SVGBackgrounds?

Originally it was built with vanilla JavaScript, CSS, and HTML. No database or anything else, but I later added WordPress (PHP+MySQL) to handle the login / eCommerce functionality.

Web development is evolving so rapidly. What changes would you like to see in the next 5 years?

Great question. I’ve worked professionally when you had to consider Internet Explorer 6. Browser inconsistencies have always been a huge source of frustration and I love that browsers are much better these days. I’d like to see this trend continue. CSS has gotten way more powerful over the years and I’d like to see that continue too. The big one that is most relevant to me revolves around SVG. Vector programs like Adobe Illustrator and Affinity Designer have basic features that don’t work in SVG. For instance, strokes can be aligned to the inside, middle, or outside of a path in software, but not in browsers yet. Something simple like this will be game changing for icon libraries. The other part is when you buy vector illustrations in a marketplace, they could be using techniques that don’t translate to SVG. I wasted \$10 on a graphic years ago to learn this lesson first hand.

What are you learning right now?

I’m building my JS knowledge. Even WordPress, which is PHP based, recommends to learn JS deeply (and did so five years ago). The SWUP.js library, which makes page transition a cinch, is forcing me to think about JS differently, I learn mostly by working on new projects like SVG Backgrounds and google searching how to program specific things when I get stuck.

Visiwig
Visiwig

What are your future goals?

Launch more tools like SVG Backgrounds and do so for a living. After the exciting response I got from SVG Backgrounds, I’ve been plotting what to do next without a shortage of ideas. I realized a common thread between many of my ideas is that they mostly revolved around graphic manipulation. I decided to build a collection of design tools for web devs and designers, all under one roof: Visiwig.com. My first tool is something I just launched called Indie Icons. It’s a free set of Icons where you can quickly copy+paste right into HTML or CSS. I have plans for a pattern tool, color palette visualizer, vector texture generator, and more. I’d love to have all three launched by August, 2021. Wish me luck!

What is something that you did outside your comfort zone that you’re glad you did?

Learning a new programming language is always a pain, especially in the beginning when you finally start to get comfortable with your first language. For me, after the realization that Flash was in trouble, I decided to try JavaScript. I pulled that band-aid off super slow, but now it’s go-to language. Really happy about the power I have over the browser knowing HTML, CSS, PHP, and JavaScript… and SVG.

What is the best advice someone has given you?

I don’t know where I got this idea, maybe a conference, but observe and try to explain what the “big guys” are doing in your space. Why look to the big players? Well for one, they are spending big money on market research, user testing, and hire the top specialist. You might not get your hands on that information or have those same resources, but when you look at many of these companies work, you might see commonalities. Ask yourself why? Why is everyone using flat logos and choosing similar modern fonts? Why do McDonald’s, Burger King, and Wendy’s use their social platforms to roast each other? Are you about to design an app… look at the navigation of the most popular apps for inspiration. But don’t blindly copy, make sure you can explain why these companies tend to make a given decision.

What advice would you give to anyone looking to start a career in web development?

Jump in and build something that excites you. To me, this is the quickest way to learn and in a way that sticks. The results will not be professional. You will run into problems. But build it anyway because you will be able to use your experience over and over again in your career and more specifically, the experience will give you ideas for future projects.

Are there any podcasts, books, or websites you would like to recommend?

Hmmm. For a short time, I followed The Futur YouTube channel which has good content, but at the end of the day I’d pick joining a community over subscribing to a podcast or author. You get many more perspectives, to interact, and make connections. But make sure the group is relevant to your work, niche, or interests. Look to Facebook groups, Reddit, or even dedicated social networks. Iain and I connected through IndieHackers, while its too early to tell, IndieHackers seems like a gem. I also was part of a web design Facebook group that grew too fast and closed down, but was great for connecting with like-minded professionals while it lasted. You never know where you’ll find value, so join a few places and weed out the ones that aren’t worthy of your time.

How can readers find out more about you and your work?

Visit Visiwig, that’s my focus. You can get alerts for when I release a new web app… the signup form is at the bottom of the website.

Or catch me on twitter: @BumpSetCreative even though I don’t dedicate regular focus to social media.


Sign up to the Trending Projects Newsletter

A weekly email showcasing trending web development projects and developer stories.

Leave a Comment