Color SVG from external CSS - html

I have a simple SVG made in Illustrator, and each part of it I'd like to have a different color. The SVG currently looks like this.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Ellipse_2_xA0_Image_1_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
xml:space="preserve">
<circle cx="500" cy="500" r="13"/>
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="500" cy="500" r="20"/>
<circle cx="911" cy="500.5" r="7"/>
<circle cx="91" cy="500.5" r="7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="218.2" y1="501.5" x2="501" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="501.5" x2="499" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="499.5" x2="499" y2="782.3"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="501" y1="782.3" x2="218.2" y2="499.5"/>
</svg>
The class currently sits in a style sheet requested before the SVG. I've tried adding classes to the SVG, line, and circle tags to try and change the colors with either fill or stroke and it remains black. I've tried removing the stroke parameter as well (even though others said to keep it), yet it'll just remove it completely than allowing the CSS to take over. What am I doing wrong?
CSS:
.svgColor {
stroke: #a90000;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="/css/loading.css" rel="stylesheet"/>
</head>
<body>
<img src="/svg/loadingSymbol.svg" alt="Loading Symbol">
</body>


If you are using an external css file you have to link it from your csv. Your svg is not inlined in the html, so the html css is not appliet to it.
Before the svg tag: <?xml-stylesheet type="text/css" href="/css/loading.css" ?>
shoud work. If it doesn't try to insert the svg with <object>.


Since the strokes are defined directly on the elements, you'll need to use !important in your css to override them.
.svgColor {
stroke: #a90000 !important;
}

Related

SVG image as a cursor pixcelated

I'm using this custom size 64*64 plus icon svg as zoom icon as a cursor in my website. As you can see, it's pixcelated. Specially the white border. Don't know why. Because it's svg it suppose to looks sharp right?
I tried everything.
Increasing border width.
Increasing size.
Set shape-rendering="auto"
None of above working.
Here is my svg code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="64px" height="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-285 377 40 40" style="enable-background:new -285 377 40 40;" xml:space="preserve" shape-rendering="auto">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.8;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;enable-background:new ;}
</style>
<title>zoom_icon</title>
<g>
<title>background</title>
<rect id="canvas_background" x="-286" y="376" class="st0" width="12.6" height="12.6"/>
</g>
<g>
<title>Layer 1</title>
<g id="Layer_2_1_">
<g id="Layer_1-2">
<circle id="svg_1" shape-rendering="geometricPrecision" class="st1" cx="-264.8" cy="397.2" r="18"/>
<line id="svg_2" class="st1" x1="-264.8" y1="386.7" x2="-264.8" y2="407.7"/>
<line id="svg_3" class="st1" x1="-254.3" y1="397.2" x2="-275.3" y2="397.2"/>
</g>
</g>
</g>
</svg>
Here is my the svg file: https://svgshare.com/i/H_C.svg
Here is the real world example. Jsfiddle
What course to pixcelated this image?

you can try removing the circle and just use a border:
.plus {
border: solid white 1px;
border-radius: 50%;
}

how to change stroke color on svg in <img> tag? [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 3 years ago.
I have an svg file, say a.svg, with the content:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<g fill="none" fill-rule="evenodd">
<line x1="25" y1="15" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
<line x1="25" y1="35" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
The svg has no stroke color, but I want to be able to set the stroke color in css when I import this svg with an tag like so:
HTML:
<img src="a.svg">
CSS:
img {
stroke: red;
/* This doesn't work */
}
How am I able to do this?

Since the SVG is in an <img> tag, you can't style it with CSS. Consider using something like inline SVG. See https://css-tricks.com/using-svg/#article-header-id-6 for more details.

It is not possible to style an svg imported via the tag. You have to edit your svg file and the changes will automatically appear on your html page.
Basing on your svg, the new code has to look like:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<g fill-rule="evenodd">
<line x1="25" y1="15" x2="35" y2="24.6" stroke="blue" stroke-width="3" stroke-linecap="round"/>
<line x1="25" y1="35" x2="35" y2="24.6" stroke="blue" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
Just add stroke="blue" on both line tags (replace blue with the color of your choice)

Why the <use> element in SVG doesn't work?

I have the following simple example. It is stored in image.svg:
<svg>
<defs>
<g id="shape">
<circle cx="100" cy="100" r="100" />
</g>
</defs>
</svg>
However, putting this code in a HTML file doesn't load anything. Why is that?
<svg>
<use xlink:href="#shape" x="10" y="10" />
</svg>
What am I doing wrong? I can't seem to make it work.

If you are using elements from another document, you have to specify the document!
<use xlink:href="#shape" x="10" y="10" />
This means "use the #shape element from the current document".
To import from another document, you need to put the reference to the SVG file in the xlink:href attribute:
<use xlink:href="image.svg#shape" x="10" y="10" />
Obviously you need to check the path is correct here. Note that this is not supported in any version of Internet Explorer, though polyfills are available.

For external svg files you need the namespace ... and I have added a fill to render the circle otherwise it will be transparent:
<svg xmlns="http://www.w3.org/2000/svg" >
<symbol id="shape" width="200" height="200" viewbox="0 0 200 200">
<circle cx="100" cy="100" r="100" fill="currentColor" />
</symbol>
<text y="20">Symbol above will not render unless referenced by use element</text>
</svg>
Then when you reference it you need to use the correct namespace for xlink:
svg.defs-only {
display:block; position: absolute;
height:0; width:0; margin: 0; padding: 0;
border: none; overflow: hidden;
}
svg {
color: orange;
stroke: red;
}
.purple {
color: purple;
stroke: black;
}
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" >
<symbol id="shape" width="50" height="50" viewbox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="currentColor" stroke="inherit" />
</symbol>
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#shape" x="10" y="10" />
<use xlink:href="#shape" x="80" y="10" class="purple" />
</svg>
If you are referencing an external file, you need to put the filename before the # e.g. image.svg#shape making sure you get the path correct of course.
Note, not all browsers support fragment identifiers - notably IE and Edge - you need to use a javascript polyfill like svg4everybody for those browsers.
Workaround - use svg inline only

You need to have the use-tag inside the SVG with the shape you want to use:
<svg>
<defs>
<g id="shape">
<circle cx="100" cy="100" r="100" />
</g>
</defs>
<use xlink:href="#shape" x="10" y="10" />
</svg>

SVG 2 (when implemented in browsers) will allow to reference another SVG file without any fragment identifier:
New in SVG 2: An href without a fragment allows an entire SVG document to be referenced without having to ensure that it has an ID on its root element.
Before (SVG 1.1):
<!-- my-vector.svg -->
<svg id="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle r="10" cx="12" cy="12" />
</svg>
<use href="my-vector.svg#icon"></use>
After (there will be no need to define id="..." on the svg):
<!-- my-vector.svg -->
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle r="10" cx="12" cy="12" />
</svg>
<use href="my-vector.svg"></use>
SVG 2 seems to be in the process of development in major browsers (see this Chrome feature and specifically this Chromium issue: Issue 366545: [SVG2] Allow to reference entire files).

Why does the background path of this svg change on hover

I'm using the following markup:
<a href="#">
<!-- first svg -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9995" y1="0" x2="23.9995" y2="48.0005">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#EAEAEA"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6
c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M27.695,29.811c0,0,1.519,5.062,5.974,4.05
c4.456-1.013,4.759-6.684,2.127-9.619C33.163,21.305,26.379,25.962,27.695,29.811z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.828,18.179c0,0-3.344,3.499-2.763,9.192
c0.581,5.694,4.186,10.392,16.208,10.392c12.021,0,15.045-6.275,15.116-11.436c0.071-5.159-2.253-7.46-3.344-8.243
c0,0,0.007-3.704-0.343-5.661c0,0-1.85-0.219-5.845,2.07c0,0-5.454-0.533-12.722,0.065c0,0-3.053-2.04-6.129-2.574
C12.006,11.984,11.496,15.196,11.828,18.179z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E2B89F" d="M17.211,23.815h14.916c0,0,4.227-0.475,4.227,6.44
c0.034,6.086-11.139,5.693-11.139,5.693s-12.236,0.486-12.243-6.269C12.956,23.579,17.211,23.815,17.211,23.815z"/>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M30.767,26.591c0.959,0,1.737,1.25,1.737,2.787
c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C29.03,27.841,29.809,26.591,30.767,26.591z"/>
<path fill="#FFFFFF" d="M30.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
c1.255,0,2.237,1.444,2.237,3.287C33.004,31.222,32.021,32.666,30.767,32.666z M30.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
c0,1.349,0.651,2.288,1.236,2.288s1.237-0.939,1.237-2.288C32.004,28.03,31.352,27.091,30.767,27.091z"/>
</g>
</g>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M18.767,26.591c0.959,0,1.737,1.25,1.737,2.787
c0,1.54-0.778,2.788-1.737,2.788c-0.958,0-1.736-1.248-1.736-2.788C17.03,27.841,17.809,26.591,18.767,26.591z"/>
<path fill="#FFFFFF" d="M18.767,32.666c-1.254,0-2.236-1.444-2.236-3.288c0-1.843,0.982-3.287,2.236-3.287
c1.254,0,2.237,1.444,2.237,3.287C21.004,31.222,20.021,32.666,18.767,32.666z M18.767,27.091c-0.585,0-1.236,0.939-1.236,2.287
c0,1.349,0.651,2.288,1.236,2.288c0.585,0,1.237-0.939,1.237-2.288C20.004,28.03,19.352,27.091,18.767,27.091z"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#9C584F" d="M24.076,32.705c0,0,0.499-1.418,1.109-0.089
c0,0-0.457,0.297-0.285,0.996l1.428,0.546h-3.23l1.28-0.575C24.378,33.583,24.562,32.527,24.076,32.705z"/>
</svg>
</a>
<a href="#">
<!-- second svg -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 480 480" enable-background="new 0 0 480 480" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="261.3877" y1="161.9675" x2="261.3877" y2="173.4675" gradientTransform="matrix(41.667 0 0 41.667 -10651.2422 -6748.2861)">
<stop offset="0" style="stop-color:#EC9728"/>
<stop offset="1" style="stop-color:#DF4C18"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M479.6,419.7c0,33.1-26.8,59.9-59.9,59.9H60.3c-33.1,0-59.9-26.8-59.9-59.9V60.3
c0-33.1,26.8-59.9,59.9-59.9h359.4c33.1,0,59.9,26.8,59.9,59.9V419.7z"/>
<circle fill="#009245" cx="142.8" cy="139" r="92"/>
<circle fill="#D4145A" cx="304.8" cy="148" r="92"/>
<ellipse fill="#D9E021" cx="206.2" cy="320.8" rx="182.4" ry="137.8"/>
<ellipse fill="#0000FF" cx="388.6" cy="217.1" rx="69.8" ry="131.5"/>
</svg>
</a>
and the following styling:
svg {
display: inline-block;
width: 64px;
height: 64px;
}
The result displays a behavior which I don't understand.
Why does the background path of the first svg change color on hover to match the color of the second svg? This behavior is consistent regardless of which svg is placed first. The first svg (Github icon) is part of Zurb's webicons. Here is a Codepen which illustrates the problem in question. Please note that I'm using Bootstrap.

You have two gradients with the same ID #SVGID_1_, which is illegal in a XML file. One in each SVG:
<linearGradient id="SVGID_1_" ...> ... </linearGradient>
Two paths reference it. That is probably confusing the browser making it behave strangely. It seems that a different gradient object is referenced when the hover event over the link occurs, causing the change in color (I am not sure.) Different algorithms might select one or the other in different moments, since they expect the IDs to be unique.
If you use different IDs for each gradient the problem will not occur.

You have multiple layers on page with same id. This can happen after Adobe Illustrator export. As workaround you can include css properties directly in svg objects instead class styles.
When you save illustration as SVG, in SVG More Options make sure that in CSS Properties you have selected Presentation Atributes.

Does element order matter for inline SVG?

In Google Chrome 24, if an element referenced by a <use> element is defined later in the document it isn't rendered. I didn't notice anything related to element order in the documentation for the use element.
Is this behavior undefined and shouldn't be expected to be consistent across browsers or just a bug in Chrome?
An example of this can be seen below (slightly modified from this question). Blue circle renders as expected, red, not so much. Firefox 17 and IE 9 render both circles as I would expect. When the same content is referenced as an external <img />, both circles render as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test2">
<circle cx="50" cy="50" r="25" fill="blue"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
<use xlink:href="#test2" x="0" y="0"/>
</g>
<defs>
<g id="test1">
<circle cx="100" cy="100" r="25" fill="red"/>
</g>
</defs>
</svg>
</body>
</html>
UPDATE: Seems to be working in Chrome 39.

The Rendering Order depends on the element order, so it looks strong like a bug in chrome:
SVG Rendering Order 1.0, Part 2: Language