I'm using this code snippet below:
<?xml version="1.0" encoding="UTF-8"?>
<html>
<body>
<svg width="900" height="300">
<g transform="translate(10,10)">
<defs>
<linearGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#05a" />
<stop offset="100%" stop-color="#0af" />
</linearGradient>
</defs>
<g>
<g class="link">
<path class="gradient0" d="M36,5.50458742 C440,5.504589729,440,5.504587889,844,5.504587429" stroke-width="12" style="stroke: url('#gradient0');">
</path>
</g>
</g>
</g>
</svg>
</body>
</html>
The numbers are generated automatically by D3. So I have no control over the exact numbers inside the Path d attribute.
As mentioned above, the graph is not displayed. But if I modify the value even just a little bit, the graph is then displayed. For example, if I increment only the initial path position from:d="M36,5.50458742 to d="M36,5.50458743, then the graph is displayed.
It's not just for the initial position. If I increment only the "C" path attribute value from: C440,5.504589729 to C440,5.504589730, the graph is also displayed.
What is the problem here? The Y position value is definitely a positive number, so it should've been displayed.
The graph is also displayed if I do not use linearGradient. If I modify only the stroke value from: stroke: url('#gradient0'); to stroke: black;, the graph is also displayed.
I'm using Chrome browser.
I have a problem with rendering SVG image, but only in Chrome (version 87). It did work in early version of Chrome, like version 86.
It does render as it should be in Firefox.
The URL of the SVG is:
https://svgshare.com/i/RuQ.svg
At Chrome, the sky-blue circle is not displayed,
While in Firefox it does.
Also, here's a simple HTML page with how I use the SVG.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<img height="50px" width="50px" src="https://svgshare.com/i/RuQ.svg"></img>
</body>
</html>
Any ideas for what might be wrong in the SVG?
This SVG looks like it was produced by Adobe Illustrator. While Robert Longson is formally right that this is a Chrome bug, the blame goes fully to Adobe.
For documentation: this is what the program exported to SVG. I have already shortened the code by ca. 50% removing unused definitions:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 43">
<defs>
<style>
.cls-3{fill:#040f21;}
.cls-4{mask:url(#mask-2);}
.cls-5{fill:url(#linear-gradient);}
.cls-7{filter:url(#luminosity-noclip-2);}
</style>
<filter id="luminosity-noclip-2" x="2.36" y="-16315" width="39.63" height="32766" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask-2" x="2.36" y="-16315" width="39.63" height="32766" maskUnits="userSpaceOnUse">
<g class="cls-7"/>
</mask>
<linearGradient id="linear-gradient" x1="22.17" y1="60.87" x2="22.17" y2="-17.54" gradientUnits="userSpaceOnUse">
<stop offset="0.21" stop-color="#3f97f5"/>
<stop offset="0.83" stop-color="#3fa9f5"/>
</linearGradient>
</defs>
<title>Dlogo</title>
<g id="Layer_1" data-name="Layer 1">
<path class="cls-3" d="M28.43,31.83a23.24,23.24,0,0,1-5.41.78c-6.12,0-8.86-2.07-8.86-11.48S17.44,9.44,23.34,9.44a18.52,18.52,0,0,1,5.09.71l-.51,3.28a16.24,16.24,0,0,0-4.22-.61c-3.62,0-5.16,1.13-5.16,8.18S20,29.22,23.7,29.22a15.69,15.69,0,0,0,4.22-.67Z"/>
<g class="cls-4">
<path class="cls-5" d="M22.17,41.31A19.81,19.81,0,1,1,42,21.5,19.83,19.83,0,0,1,22.17,41.31Zm0-35.21a15.4,15.4,0,1,0,15.4,15.4A15.41,15.41,0,0,0,22.17,6.1Z"/>
</g>
</g>
</svg>
The second path is the only member of a group .cls-5, which is masked with #mask-2.
This luminosity mask contains an empty group, making the mask by default hiding all content that is masked. To counteract this, the group is filtered with #luminosity-noclip-2. The filter floods an area in user space of 39.63 by 32766 with white, then copies the group contents (nothing) on top. As a result, the luminosity mask should be filled white, making all masked content visible, completely unaltered.
In short: nothing but useless junk. In theory, it does nothing. In practice, it wastes computing resources and gives oportunity to almost every bug renderers might have to bite you.
If this is what Illustrator produces nowadays, throw it out of the window to never use again.
A clean SVG that is identical in all aspects to the intended one looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 43">
<linearGradient id="linear-gradient" x1="22.17" y1="60.87" x2="22.17" y2="-17.54" gradientUnits="userSpaceOnUse">
<stop offset="0.21" stop-color="#3f97f5"/>
<stop offset="0.83" stop-color="#3fa9f5"/>
</linearGradient>
<title>Dlogo</title>
<path style="fill:#040f21;" d="M28.43,31.83a23.24,23.24,0,0,1-5.41.78c-6.12,0-8.86-2.07-8.86-11.48S17.44,9.44,23.34,9.44a18.52,18.52,0,0,1,5.09.71l-.51,3.28a16.24,16.24,0,0,0-4.22-.61c-3.62,0-5.16,1.13-5.16,8.18S20,29.22,23.7,29.22a15.69,15.69,0,0,0,4.22-.67Z"/>
<path style="fill:url(#linear-gradient);" d="M22.17,41.31A19.81,19.81,0,1,1,42,21.5,19.83,19.83,0,0,1,22.17,41.31Zm0-35.21a15.4,15.4,0,1,0,15.4,15.4A15.41,15.41,0,0,0,22.17,6.1Z"/>
</svg>
I've tried to set the stroke color. It works using linearGradient but it doesn't work using solidColor:
<svg class="svg_defs" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="color_1">
<stop offset="0" stop-color="red" stop-opacity="1"/>
</linearGradient>
<solidColor id="color_2" solid-color="blue" solid-opacity="1"/>
<linearGradient id="half">
<stop offset="50%" stop-color="green" stop-opacity="0.5"/>
<stop offset="50%" stop-color="green" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 101 101" width="50">
<rect x="0" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_1)"/>
<rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="url(#color_2)"/>
</svg>
The rect referencing color_1 is working, but not the second one referencing color_2. Even the example on w3.org isn't working. The link should show forms in red. This happens (or doesn't happen) in Firefox, Chrome and Safari.
Is there something missing?
Try it: jsFiddle
solidColor is not part of SVG 1.1, it is part of SVG 1.2 tiny and in a slightly altered and non-backwards compatible way it's proposed to be part of the upcoming SVG 2 specification.
I've a patch for Firefox that would implement solidColor but the only other UA that ever supported this was the now obsolete Opera version 12.
solidColor seems rather unnecessary given that it can be emulated either with a single stop gradient or via CSS variables. If you can persuade some other UAs to consider implementing it my Firefox patch can land.
SolidColor isn't support by any browser. It's also mentioned in the svg2 working draft, but I don't have a clue when it will be implemented.
Alternative you could use:
<rect x="50%" width="49%" height="99%" fill="url(#half)" stroke-width="2" stroke="blue" stroke-opacity="1"/>
or
<linearGradient id="color_2">
<stop offset="0%" stop-color="blue" stop-opacity="1"/>
<stop offset="100%" stop-color="blue" stop-opacity="1"/>
</linearGradient>
I'd like to create an inline-svg text element with a fill attribute loading a gradient defined in an external svg document.
Inline SVG
<svg>
<text fill="url(/path/to/svg.svg#gradient)">Mask this text</text>
</svg>
/path/to/svg.svg
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ffeab4; stop-opacity:1" />
<stop offset="30%" style="stop-color:#ed9f3b; stop-opacity:1" />
<stop offset="40%" style="stop-color:#ed9f3b; stop-opacity:1" />
<stop offset="70%" style="stop-color:#ffeab4; stop-opacity:1" />
<stop offset="100%" style="stop-color:#ed9f3b; stop-opacity:1" />
</linearGradient>
</defs>
</svg>
Here is a jsfiddle test case and here is a gist of the SVG gradient I'm trying to load.
Question
Is it possible to load an external fill into an inline-svg element?
Have I just defined my external gradient incorrectly or am referencing it incorrectly?
Using external fill and stroke is allowed by the SVG spec, but not all browsers implement that part. Opera and Firefox does, but not Chrome for example.
A live example here.
The syntax you describe is correct. E.g fill="url(example.svg#gradient)" will fetch the external example.svg and use the specified gradient from that file.
I was inspecting the code of a website and I noticed they had an unusual value for the background property of an element via CSS. It seems to be a gradient. Does anyone know what it is? If it is valid? And what browsers support it?
Here is the code:
background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
I appreciate any and all help!
Thanks in Advance! :-)
Well, first thing is to de-base64 it:
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<linearGradient id="hat0" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.65" />
<stop offset="100%" stop-color="#fff" stop-opacity="0.9" />
</linearGradient>
<rect x="0" y="0" width="100" height="100" fill="url(#hat0)" />
</svg>
Thus you can see that yes, it is a gradient. Non-IE browsers support this, and IE 9+ supports it as well.
I think all modern browsers support it. This is a scalable vector graphic (you often find those used for maps on wikipedia) file that is base64-encoded, that means it consists many bytes which wer converted to be used in ASCII character sets.
It is base64 encoded SVG file. This convention is a means of using a SVG graphic file as an embedded background image. I do the same thing with the Travelocity logo here http://mailmarkup.org/slideshow.xhtml