darsain / svg_sprites.md
You need to structure images.svg in a way that enables SVG fragment identifiers. There are 3 ways I know of:
1. SVG stack with global viewBox
You’d use this when all images are the same size.
svg viewBox pl-s">0 0 16 16" xmlns pl-s">http://www.w3.org/2000/svg"> defs> style> .img < display: none > .img:target < display: inline > style> defs> g id pl-s">chart" class pl-s">img"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> svg>
2. SVG stack with per image viewBox
You’d use this when every image has different size.
svg xmlns pl-s">http://www.w3.org/2000/svg"> defs> style> .img < display: none > .img:target < display: inline > style> defs> svg viewBox pl-s">0 0 16 16"> g id pl-s">chart" class pl-s">img"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> svg> g" tags --> svg>
3. SVG sprite with ID’d views
This one is sub-optimal. When mismatching target element to image size ratio, you might see other sprites peeking from sides. You’d have to make big gaps between images, but that’s ugly and not bulletproof.
It is also more annoying to write build scripts for. But here it is anyway:
svg xmlns pl-s">http://www.w3.org/2000/svg"> view id pl-s">chart" viewBox pl-s">0 0 16 16"/> view id pl-s">plus" viewBox pl-s">16 0 16 16"/> g transform pl-s">translate(0 0)"> rect x pl-s">6" width pl-s">4" height pl-s">16"/> rect x pl-s">12" y pl-s">4" width pl-s">4" height pl-s">12"/> rect x pl-s">0" y pl-s">8" width pl-s">4" height pl-s">8"/> g> g transform pl-s">translate(16 0)"> mask id pl-s">m" x pl-s">0" y pl-s">0" width pl-s">1" height pl-s">1"> circle cx pl-s">8" cy pl-s">8" r pl-s">8" fill pl-s">white"/> line x1 pl-s">8" y1 pl-s">3" x2 pl-s">8" y2 pl-s">13" stroke pl-s">black" stroke-width pl-s">2"/> line x1 pl-s">3" y1 pl-s">8" x2 pl-s">13" y2 pl-s">8" stroke pl-s">black" stroke-width pl-s">2"/> mask> rect width pl-s">16" height pl-s">16" mask pl-s">url(#m)"/> g> svg>
Currently, SVG fragment identifiers in CSS backgrounds work only in FF and IE, and will work in Chrome as soon as crbug.com/128055 is fixed.
Forums
and am having no luck whatsoever. I’ve tried this numerous ways but have yet to figure out the right syntax. Is this even possible? I’ve been searching and searching for an answer but haven’t come up with anything.
Instead of deleting my posts and keeping my thread 4 pages deep where no one will see it, maybe you can actually help me? Can you answer my question please?
As far as I am aware, what you are trying to do is not possible. I don’t believe SVG fragment identifiers can be placed in pseudo-elements like that unless you are using a sprite which isn’t the case here…I think.
Thank you Paulie. I appreciate the reply. We are using a sprite though. The first bit of code above is the sprite which is either called as an include or which is hard coded at he beginning of the HTML doc.
Sprites can be used as background images as a whole, not part. You’d need to use background positioning etc to manage this. What I am saying is use the whole SVG not one small part of it.
@Fatbat From my understanding of the information you have provided – You are using an SVG Sprite – which gets loaded in your HTML doc and must be xlinked. You are then trying to access symbols that you have loaded into your HTML file, from a CSS/less/SASS file. Due to the nature of SVGs and their necessity for xlinking – you will not be able to use an SVG you have loaded into the DOM through your HTML file, to modify the styles of your page or site. For the specific use case that I am imagining you are trying to achieve(an SVG icon used as a background image), consider this: you can load your svg as the background-image property, then use background position to adjust which icon/version of the icon to display. That would look something like this: .icon background-image: url(directory/path-to-svg-sprite.svg);
width: 1em; height: 1em;
font-size: 12px; //makes the width AND height 12px (you would need to adjust your svg viewBox in this particular use case)
display: inline-block;
position: relative;
>
.icon.icon-arrow-left:before background-position: your specific icon coordinates here;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: «»;
display: block;//psuedo element best practice is to set a display value
> The tricky thing about this method however, is that you may only access your SVGs as they appear in your sprite – you cannot modify the actual properties of the SVG. So if your icon needs to fade from red to black, you will need a red icon, and a black icon in your sprite sheet.
How to add SVGs with CSS (background-image)
There are TWO methods for displaying SVG images as a CSS background image:
Notice with this method we have to treat the SVG code before it will work. In the example, we convert the SVG to a Data URI. You could even convert it to Base64, but that will result in a messier, longer code blob. It is a best practice to avoid Base64 in this case.
Tip: Use this SVG to CSS converter tool to quickly convert your SVG code into a data URI.
After you place your file path or SVG code into the background-image property, you can further tweak how the background displays. You see, the great thing about using an SVG as a CSS background-image is that they can be styled with CSS background properties.
The CSS background-image properties
Let’s review all the properties related to background-image and what they do.
- Background-attachment:
Example values: scroll; fixed; local;
The attachment specifies how the background moves relative to the user’s screen. When the user scrolls, the background can scroll along with a given section, or stay put ( fixed ).
- Background-position:
Example values: center; top left; 50% 50%; right 30px bottom 15px;
The background-position determines where the image is displayed within its container. The center keyword is great with large backgrounds and at making patterns symmetrical. With smaller backgrounds, you may reach for a combo of keywords and lengths to place the background image more precisely. - Background-size:
Example values: cover; contain; 500px 250px; auto;
This controls how big or small the image displays. A value of cover forces the image to fill its entire containing element in proportion, and either the excess width or height will get clipped. A value of contain is similar in that it fills its container in proportion, but without clipping. You can also provide a specific width and height value. - Background-repeat:
Example values: no-repeat; repeat; repeat-x;
The background-repeat property allows you to tile the background image into a pattern. - Background-color:
Example values: red; #F00; rgb(0,255,165);
SVGs are a transparent image format and if the SVG elements do not cover the entire viewBox, the background color will be visible behind your SVG. - Background-origin:
Example values: border-box; padding-box; content-box;
The origin determines the boundary of the background’s container. Border-box will stretch the background area for the entire container, while the padding-box and content-box values shrink the background area within the border and inside the padding respectively.
- Background-clip:
Example values: border-box; padding-box; content-box;
Similar to background-origin , this property defines the background area, with one difference: the background doesn’t resize, but instead crops the background image to fit in the assigned boundary.
- Background-blend-mode:
Example values: multiply; screen; overlay, color-dodge, color;
This property blends the colors of the target background with what is visible behind the target element, blending into a single colorful result. The blend modes are essentially the browser version of Photoshop’s blending modes.
Layering multiple background images
Background-image can hold multiple background image layers to achieve cool effects. To create these image layers, comma-separate each image value in a single background-image property. Then when you use any related background properties, comma-separate those varied values to coincide with the images, or instead use a single value which will apply to all images the same.
background-image: url( '/path/image-1.svg' ), url( '/path/image-2.svg' ), url( '/path/image-3.svg' );You can mix images, SVG data URIs, and CSS gradients. But you need to overlap images with transparency or take advantage of the background-blend-mode discussed above. Otherwise you will only see one background. The first image is on top of the background stack.
Let’s mix a few backgrounds now, and see what we get. First I headed over to the homepage of SVGBackgrounds.com to find a few quick backgrounds to layer together. Here is the code and results:
BUT, this technique prevents the need to layer div containers to achieve a layer effect. Let’s try again, this time to make a simpler one that looks useable. Let’s place a pattern over a cool image texture.
Much better!
I could definitely see something more like this being used in a real-world project. Subtle backgrounds are always nice.
Wrapping up about SVGs in CSS background-images
We looked at how to add SVGs into the CSS property background-image . With all the related background properties and the fact you can layer backgrounds, there is little that can’t be achieved. This way of adding website backgrounds is powerful.
), the creator behind SVG Backgrounds. Hire me to help you with design on your website or app.
), the creator behind SVG Backgrounds. I produce free and paid resources every few months, sign up for alerts.