[repost-link]
WordPress recently updated the built-in admin page that allows users to search for plugins hosted on the official plugin repository. One aspect of this update gave all plugins the ability to have icons. Icons are auto-generated patterns until the author uploads a real one, but obviously a hand-created icon is going to look better than a pattern of color. I set out to create an icon for my Featured Galleries plugin, trying to keep it similar themed to the cover photo.
Generally an icon indicating an image gallery is two images on top of one another, with the lower only barely visible. I decided to go with a minimalist approach similar to the front page of my website. A blurred out version of my blue background, with sharp white lines for the icon itself on top. I’d need a 256×256 PNG as well as a 128×128 PNG. Or, I could go with SVG. SVG is the obvious candidate, given that I’d only need one image, it’ll scale perfectly, and I’ve been really into SVGs recently.
Problem is the background. The background image is not something that can be turned into a vector without losing what it is:
So I set out to check and see, can an SVG icon, or any element inside it, have a vector image background.
Turns out the answer is yes, and it’s actually super simple. First you need to do is convert your vector image into a base64 datastream. Then you’ll add a def element into your SVG, and inside of that add a style element so you can place this CSS:
svg {
background-size:cover;
background-repeat:no-repeat;
background-image:url();
}
Inside the URL, place the datastream code, which ends up being a bit to long to show here. The final SVG image becomes:
Full working code in CodePen embed:
Thoughts:
As I’ve evolved as a designer, I’ve drifted towards full-screen image backgrounds as a natural evolution of full-width colors. I have never liked the look of a narrow column of text, so I’ll do anything I can do to let me break that appearance up, mostly using full-width things. The problem with full-screen images is that they are resized. Sharpness is going to be an issue. On my own website (and business cards, and WordPress plugin cover photos), I’ve chosen to go with an image that I first overlayed with blue tint and then blurred out. The beauty of blurred out images for backgrounds is that sharpness no longer matters. I can made the images 800px by 600px, and just size it up and down as much as I want. It’ll get more blurry, but so what? It ends up making life very very simple.
The same thing applies here. The background image in this SVG is going to be blurry. But it starts out blurry, so it doesn’t matter. Using a vector background image inside an SVG wouldn’t work if I wasn’t already using a blurred out image.
Leave a Reply