Use SVG Sprite in Vue JS as CSS Background Image - css

If I set up an SVG sprite file in a Vue JS HTML template like this, it works great:
<svg class="icon">
<use xlink:href="~#/assets/images/icons.svg#edit"></use>
</svg>
And the icons.svg file looks something like this:
<svg style="display: none;">
<symbol id="edit" viewbox="0 0 15 15">
<g>...</g>
</symbol>
</svg>
But if I try and use that same SVG fragment in a Vue CSS file like this:
.edit-icon{
background:url('~#/assets/images/icons.svg#edit') no-repeat;
background-size: 15px 15px;
}
...it doesn't work. My assumption is that the browser can only traverse to the #edit symbol in HTML.
Is there a way to use this same SVG sprite method in a CSS background?


Try not to use both ~ and # in the css import.
.edit-icon{
background:url('#/assets/images/icons.svg#edit') no-repeat;
background-size: 15px 15px;
}

Related

Ionic SVG stylesheet reference

When referencing an SVG element in an object tag you can manipulate it via CSS by placing a stylesheet link in the SVG file. I can't seem to get it to work. I'm placing:
<?xml-stylesheet type="text/css" href="build/main.css"?>
before the SVG tag. And I have a class on the element that I'm referencing in an SCSS file associated with the page the SVG object is part of. I'm thinking that build/main.css might not be where that SCSS is transpiled to, but I can't find any good information online.
So how do I select an element of an SVG (preferably not inline) in CSS within an Ionic 3 project?

in my case i did this
html folder ->
digital.svg
css(folder) -> main.css
digital.svg
<svg id="Digital_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
<defs>
<style>
#import url(css/main.css);
</style>
</defs>
<title>
Digital
</title>
<path class="cls-1 last" d="M73,43.16A4.84,4.84,0,1,1,68.16,48,4.84,4.84,0,0,1,73,43.16m0-1A5.84,5.84,0,1,0,78.84,48,5.85,5.85,0,0,0,73,42.16Z"/>
<path class="cls-1 first" d="M23,43.16A4.84,4.84,0,1,1,18.16,48,4.84,4.84,0,0,1,23,43.16m0-1A5.84,5.84,0,1,0,28.84,48,5.85,5.85,0,0,0,23,42.16Z"/>
<circle class="cls-2 third" cx="61.67" cy="48" r="9.44"/>
<path class="cls-1 secound" d="M45.67,34.72A13.28,13.28,0,1,1,32.39,48,13.3,13.3,0,0,1,45.67,34.72m0-2A15.28,15.28,0,1,0,61,48,15.28,15.28,0,0,0,45.67,32.72Z"/>
</svg>
css/main.css
.cls-1{
fill:#333;
}
.cls-2{fill:#2f86c9;}
svg {
vertical-align: bottom;
width: 100%;
max-width: 100px !important;
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
}
result

Fill external imported svg file

I'm using Angular 5 and i would fill my white svg image.
I have a svg file like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>ic_calendar</title><g id="Level_2" data-name="Level 2"><g id="screen"><path d="M18.5,5.11a2.55,2.55,0,0,0-.58-1.68,2.27,2.27,0,0,0-1.7-.71H14.85v-1a.68.68,0,1,0-1.35,0v1H6.39v-1A.67.67,0,0,0,5.72,1,.68.68,0,0,0,5,1.68v1H3.75A2.15,2.15,0,0,0,1.5,5.09V16.4a2.71,2.71,0,0,0,.69,2A2.08,2.08,0,0,0,3.7,19H16.34a2.14,2.14,0,0,0,2.15-2.26C18.51,15.07,18.5,5.57,18.5,5.11Zm-15.65,0h0c0-.71.27-1,.9-1H5v1a.69.69,0,0,0,.68.68.68.68,0,0,0,.67-.68v-1H13.5v1a.68.68,0,1,0,1.35,0v-1H16.2a1,1,0,0,1,.71.26,1.17,1.17,0,0,1,.24.72V6.84H2.85Zm14.3,11.64c0,.78-.52.9-.81.91H3.7a.73.73,0,0,1-.56-.2,1.49,1.49,0,0,1-.29-1V8.2h14.3Z" style="fill:#fff"/><rect width="20" height="20" style="fill:none"/></g></g></svg>
So, i'm importing it through this code:
<svg class="myClass">
<use xlink:href="assetFolder/ic_calendar.svg#Level_2"></use>
</svg>
However, i can't change the svg image style and i can't fill it.
I tried, via sass, to add the following:
svg { fill: blue; }
or
path { fill: blue; }
But nothing...
Can anyone help me?
Thanks

Presentation attributes svg have the highest priority and can not
be changed with thecss. Therefore, they need to be removed if you
want to change the color of the svg objects from the external table
CSS
When using the <use> command, svg objects fall into the shadow DOM
In order to stylize these objects, you must use forced inheritance
path {
fill:inherit;
stroke:inherit;
}
Below is an example where objects are called from the <defs> section with the use command and stylized from the external table css
path {
fill:inherit;
stroke:inherit;
}
#screen {
fill:dodgerblue;
}
rect {fill:#D5D5D5;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>ic_calendar</title>
<defs>
<g id="screen">
<rect id="rect1" width="20" height="20" />
<path d="M18.5,5.11a2.55,2.55,0,0,0-.58-1.68,2.27,2.27,0,0,0-1.7-.71H14.85v-1a.68.68,0,1,0-1.35,0v1H6.39v-1A.67.67,0,0,0,5.72,1,.68.68,0,0,0,5,1.68v1H3.75A2.15,2.15,0,0,0,1.5,5.09V16.4a2.71,2.71,0,0,0,.69,2A2.08,2.08,0,0,0,3.7,19H16.34a2.14,2.14,0,0,0,2.15-2.26C18.51,15.07,18.5,5.57,18.5,5.11Zm-15.65,0h0c0-.71.27-1,.9-1H5v1a.69.69,0,0,0,.68.68.68.68,0,0,0,.67-.68v-1H13.5v1a.68.68,0,1,0,1.35,0v-1H16.2a1,1,0,0,1,.71.26,1.17,1.17,0,0,1,.24.72V6.84H2.85Zm14.3,11.64c0,.78-.52.9-.81.91H3.7a.73.73,0,0,1-.56-.2,1.49,1.49,0,0,1-.29-1V8.2h14.3Z" />
</g>
</defs>
<use xlink:href="#screen" />
</svg>

You have an inline style on your svg path - style="fill:#fff". Inline styles take precedence over styles in a CSS stylesheet. But thats what !important is for!
either update your style to this:
path { fill: blue !important; }
OR simply remove the inline styling.

How can I change SVG fill color inside an object without putting any css code inside the svg file

How can I change the SVG fill color on hover inside an object tag without putting any CSS code inside the svg file? Here's my code:
<div class="icon-holder">
<object data="http://useaible.com/wp-content/themes/storefront/assets/images/icons/bulb-round.svg"></object>
</div>
I know that CSS won't work if it's not inside the SVG-file. Is there another way on implementing a hover effect without using inline SVG nor using CSS inside the SVG-file?

You can use SVG sprites. Define your svg after your body like that :
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-facebook" viewBox="0 0 16 32">
<title>facebook</title>
<path class="path1" d="M4.973 30.593v-13.872h-4.973v-4.984h4.974v-4.433c0-4.595 2.775-7.303 6.874-7.303 1.964 0 3.66 0.211 4.152 0.276v5.053l-3.393-0.001c-2.229 0-2.646 1.106-2.646 2.66v3.749h5.711l-0.807 4.984h-4.904v13.872h-4.988z"></path>
</symbol>
</defs>
</svg>
and call it in your code :
<svg class="icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
That way you can aply CSS on it.

Changing SVG color via CSS, SVG color wont change

Heres my code:
HTML:
<img src="../img/icon-play.svg" class="play-button-svg">
SASS:
.play-button-svg
padding-left: 10px
fill: $white
The icon keep its original color and does not change to white.

by using SVG as image or background image you cant control with CSS. If you want '.play-button-svg' to work, you should place SVG code which will look like-
<svg ...>
<path .../>
</svg>
Then apply class-
<svg ...>
<path class="play-button-svg" .../>
</svg>
and now your CSS will work :)

css sprite for scaled background svg in firefox

I wanted to use scaled svg images as icons of different sizes, but found inconsistent behaviors in firefox.
Without css sprite, firefox would anti-alias the scaled images. But with css sprite, firefox would not anti-alias them. Therefore, The icons looked ugly with css sprite.
Please visit this jsfiddle for details. What's the problem with firefox?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.whole {
width: 80px;
height: 80px;
background-image: url("outliner.svg");
background-size: 100% 100%;
}
i {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("outliner.svg");
background-size: 500% 500%;
}
.circle { background-position: -32px 0;}
.disk { background-position: 0 -16px; }
</style>
</head>
<body>
<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>
</body>
</html>

Currently, there is no CSS method to change the rendering mode of SVG elements, though there is an SVG attribute that can do so: shape-rendering.
I went ahead and ran your SVG file through a base64 encoder (which you can use to decode the data in the following examples), after adding shape-rendering: <value> to each of your <g> elements, where <value> has several options: optimizeSpeed (example), crispEdges (example), and geometricPrecision (example).
Depending on how you want your final SVG to display, just choose one of the particular values, and your final SVG code will look somewhat like the following (note the shape-rendering attribute on each of the <g> tags):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<g shape-rendering="crispEdges" stroke="#333" fill="#333">
<g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)">
<line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/>
<line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/>
</g>
<g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)">
<!-- svg continues below ... -->

Resources