The Background Blog
The Background Blog covers topics at the cross section of web design, entrepreneurship, and all things SVG.
New: 48 Underline doodlesProduct Update:
I designed and added a new collection to the SVG elements section of the site. Pro members get access to all 48 SVG underlines.
READMatt Visiwig | Jun 1, 2023
Data URIs are a wildly underused website speed optimization
Using SVG Data URIs reduces HTTP requests, boosts load speed, allows for dynamic SVG manipulation, and provides advantages to your web development workflow,
READMatt Visiwig | May 22, 2023
New SVG Elements: List Item BulletsProduct Update:
I created and published a new set of icons, specifically meant for list items, you know those unordered lists that usually have blocks dots, aka HTML bullets.
READMatt Visiwig | May 15, 2023
Custom CSS Bullets with ::marker
It's easy to add a custom SVG bullet, declare list-style-image: with your image and you're 80% done. The challenge is in making size and position adjustments.
READMatt Visiwig | May 5, 2023
Added search to help you find backgroundsProduct Update:
I added the ability to search backgrounds. You can find the search page under Backgrounds > Search Backgrounds or by visiting svgbackgrounds.com/search
READMatt Visiwig | May 1, 2023
3 ways to use SVG blobs on your website (CSS)
We're going to demo three practical ways to use SVG blobs in your website design with CSS: as a background, shape divider, and a mask.
READMatt Visiwig | Apr 27, 2023
How to create SVG Blobs
You can use a SVG generator to create simple blobs. However, if you want more control, use a vector design program, let's learn how.
READMatt Visiwig | Apr 25, 2023
Introduction of SVG ElementsProduct Update:
The site has major developments, I added a new section that allows SVG Backgrounds to offer more than backgrounds. The site will now offer various types of SVGs
READMatt Visiwig | Apr 19, 2023
SVG basics: Styling shape elements
We will breakdown a few foundational attributes you can use to change the appearance of SVG shape elements: fill, stroke, and opacity.
READMatt Visiwig | Mar 7, 2023
Improved the SVG to CSS converterProduct Update:
When I launched in 2018, supporting older browsers meant we had to URL encode most of the special characters, but now there is a more modern approach.
READMatt Visiwig | Jan 17, 2023
SVG basics: drawing circles and ovals
Learn the basics of the CIRCLE and ELLIPSE elements in SVG. We dissect their similarities and differences and how to style these circular SVG elements.
READMatt Visiwig | Oct 31, 2022
10 new geometric patterns addedProduct Update:
The latest update include 10 new repeating patterns with a mic of hexagonal, earthy, and stipe designs.
READMatt Visiwig | Oct 20, 2022
Is SMIL dead in 2022? Nope
Fast-forward to 2022 and the only browsers that don’t support SMIL are Internet Explorer (officially retired) and Opera Mini. Does that mean SMIL is alive?
READMatt Visiwig | Sep 29, 2022
Save your own colors with this new featureProduct Update:
You can now save up to 10 brand colors, which are available for quick selection in the background editor.
READMatt Visiwig | Sep 20, 2022
5 new mesh gradient backgrounds addedProduct Update:
Mesh gradients have become quite popular, but SVG is limited to linear and radial gradients. I came up with some techniques to recreate SVG mesh gradients.
READMatt Visiwig | Aug 12, 2022
10 new animated backgrounds addedProduct Update:
Based on a user request, I designed a small set of 10 animated backgrounds.
READMatt Visiwig | Jun 8, 2022