I've scoured all corners of the web looking for a solution to this but it seems no one else has had this issue.
Here is my current code:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="mygradient">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<path id="myID" d="M 0 78.37136556477951 C 207.875 51.32892778872315 207.875 51.32892778872315 415.75 64.85014667675132 C 623.625 78.37136556477951 623.625 78.37136556477951 831.5 60.035876993171016 C 1039.375 41.70038842156255 1039.375 41.70038842156255 1247.25 64.68862384088634 C 1455.125 87.67685926021014 1455.125 87.67685926021014 1663 60.035876993171016 L 1663 3756 L 0 3756 Z" fill="url(#mygradient)"/>
</svg>
Whenever any browser tries to render this, the <linearGradient> breaks completely. This is how it renders in browsers:
<lineargradient id="mygradient"><stop offset="0%" stop-color="red"></stop offset="0%" stop-color="red"><stop offset="100%" stop-color="yellow"></stop offset="100%"></lineargradient id="mygradient">
As you can see, all spaces in the <linearGradient> become and <linearGradient> becomes <lineargradient>.
Any help with this will be appreciated.
Sorted this one out, pasted my <linearGradient> code snippet into a minifier which seemed to fix the issue. Don't know why but it just did.
Related
I'm working on a project that uses svg. I generate this svg code thanks to an ocaml library:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" version="1.1" width="161.8mm" height="100mm" viewBox="0 0 161.8 100" color-profile="auto" color-interpolation="linearRGB" color-interpolation-filters="linearRGB">
<g fill="none" stroke-miterlimit="9.98123" transform="matrix(100 0 0 -100 -0 100)">
<defs>
<path id="i1" d="M0 0L1.618 0L1.618 1L0 1Z"/>
</defs>
<use l:href="#i1" fill="#50C878"/>
</g>
</svg>
When I use gthumb or GIMP to display the svg, it prints the correct green square. However, when I include this block of code in Chromium or Firefox, the block appears in the html tree but nothing is display. This is the first time I use svg: after several researches on Google, I can't find anything....
Does someone know why it doesn't work ?
Edit
Solve with the answer:
<use xlink:href="#i1">
I made a simple Scalable Vector Graphic image (using the Inkscape tool v0.91). The editor was displaying it all properly however when I opened the file in Google Chrome 51 it wasn't displayed like it should, with the positioning wrong (an added gap after some text). I created a simpler example version which is shown here where an embedded image on the left is removed and a line is added to the original where the horizontal text on the left should end.
The original image (viewed in the editor):
The image viewed in the Google Chrome 51 browser:
I don't understand why this would be happening as the browser should be drawing the text in the image at the same font size and position as the image describes, scaling them if the zoom is changed. A look at the element viewer in the developer tools confirms that the text did not have a smaller font size attribute and both viewers were at the same zoom level. The image shown in the editor is saved to the file and not modified before being used by the browser so it is definitely a browser problem. Even if no one can find the reason for this problem, I would still like a solution.
Here is an example image to reproduce the issue and test with (I forgot this earlier and was recommended to). SVG image host servers seemed rare so I added it as a code snippet however it can be copied back into a file with the .svg extension to be viewed normally in a browser.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="135.972"
height="40"
viewBox="0 0 135.97202 39.999998"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="test.svg"
inkscape:export-filename="C:\blah\logo.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker4688"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Send">
<path
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
id="path4690"
inkscape:connector-curvature="0" />
</marker>
<linearGradient
osb:paint="gradient"
id="linearGradient9980">
<stop
id="stop9982"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
<stop
id="stop9984"
offset="1"
style="stop-color:#000000;stop-opacity:0;" />
</linearGradient>
<marker
inkscape:stockid="Arrow1Send"
orient="auto"
refY="0"
refX="0"
id="marker4688-8"
style="overflow:visible"
inkscape:isstock="true">
<path
inkscape:connector-curvature="0"
id="path4690-0"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
transform="matrix(-0.2,0,0,-0.2,-1.2,0)" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible;"
id="marker4688-5"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Send">
<path
transform="scale(0.2) rotate(180) translate(6,0)"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#a5a5a5;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4690-1" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="2"
inkscape:cx="41.427915"
inkscape:cy="11.725916"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="961"
inkscape:window-height="601"
inkscape:window-x="336"
inkscape:window-y="51"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:showpageshadow="false"
showborder="true"
borderlayer="false" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="23.658821"
y="16.700916"
id="text4409"
sodipodi:linespacing="94.999999%"><tspan
sodipodi:role="line"
x="23.658821"
y="16.700916"
id="tspan4413"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"><tspan
rotate="0 0 0 0 0 0 0 0 0 0"
id="tspan4465"
style="font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold Italic';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">Text that</tspan></tspan><tspan
sodipodi:role="line"
x="23.658821"
y="32.13842"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"
dx="0 0 0 0 0 0 0 0 0 0 10"
dy="0 0 0 0 0 0 0 0 0 0 0"
id="tspan4473"><tspan
id="tspan4475"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">gets moved</tspan></tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#0050a0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="133.1541"
y="7.5629053"
id="text4409-4"
sodipodi:linespacing="70.999998%"
transform="scale(0.99999351,1.0000065)"><tspan
sodipodi:role="line"
x="133.1541"
y="7.5629053"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4473-1">t</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="11.79909"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4231">e</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="16.114841"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4233">s</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="21.423279"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:89.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4235">t</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="26.799091"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4237">i</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="31.114843"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4239">n</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="35.476368"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
rotate="0 0"
dy="0 0"
dx="0 10.000066"
id="tspan4241">g</tspan></text>
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 129.69402,1.1636744e-6 0,39.9999998363256"
id="path4340"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
</svg>
User #rhashimoto's useful answer explains how it is a font problem, not a browser or Inkscape problem. The text font name was set to sans-serif which specifies a group of fonts instead of a specific font which allowed Inkscape to chose a different font to Google Chrome when displaying, causing the text dimensions to be different. Both setting the font name to "Arial" and converting the text to a path solved the problem.
Your SVG text elements contain a font-family attribute with value sans-serif. This value does not specify a particular font, only that the font selected should not contain serifs. Inkscape and Chrome are using different sans-serif fonts, and these fonts produce text of different widths.
It appears that Inkscape tries to use DejaVu Sans if present as its sans-serif font. On Chrome, go to chrome://settings/fonts to see the sans-serif font - on my machine it is Helvetica.
Since the text layout is important to you, you should assign a specific font to your text objects. For example, you could change your text elements in Inkscape to explicitly have a font-family of 'DejaVu Sans' (you can also try it in Chrome Developer Tools). Then the resulting SVG should use the same font in Chrome as long as Chrome supports that font on your target platforms.
That last caveat means that you should not expect any arbitrary esoteric font to reproduce properly across all browsers and machines. You may want to read the "Fonts In SVG" section of http://nimbupani.com/about-fonts-in-svg.html.
You also have the option of converting the text to a path. Note, however, that this loses the textual content so it can't be copied to the clipboard, read by a screen reader, etc.
Strange one this.
I've got the following:
<svg aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<table>
<tr>
<td>
<svg aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
</td>
</tr>
</table>
The first icon doesn't show up. However if I change the svg file of the first to:
<svg aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#down"></use>
</svg>
Then both show, is there something I'm missing with SVG from the same file?
It's definitely not a URL thing, because if both <svg> tags use the same URL, then only the second is displayed.
Many Thanks
HOPE THIS HELPS TO ALL NEW PEOPLE
After all this years I stumbled upon the same problem and I solved it...
What happened for me was that the fill attributes of my paths shared the same url(#paint0_linear) and the viewbox of these "fill" where set on the position of the first SVG in the DOM, to solve this just change the name of the fills (and their corresponding id's) of the subsequent SVGS.
English is not my native language so let me show you what I did in code in case I didn't make myself clear:
<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="hamb1">
<path id="hambBottom1" fillRule="evenodd" clipRule="evenodd" d="M0 22" fill="url(#paint0_linear)"/>
<path id="hambTop1" d="M13.8599" fill="url(#paint1_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="-6.5" y1="30" x2="18.9429" y2="34.8415" gradientUnits="userSpaceOnUse">
<stop stopColor="#134F82"/>
<stop offset="1" stopColor="#2BA665"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="-6.50012" y1="30" x2="18.9428" y2="34.8414" gradientUnits="userSpaceOnUse">
<stop stopColor="#134F82"/>
<stop offset="1" stopColor="#2BA665"/>
</linearGradient>
</defs>
</svg>
Check that the fill attribute on the paths NEVER share the same id.
I can't be completely sure since I guess you should explain question properly, But it may be the case that first file path may not be correct (ie with link "/assets/icons/utility-sprite/svg/symbols.svg#down") (ie may be some spell error) so the file is not loading. Try loading file manually with url.
Chrome's way of rounding sub-pixel values in SVGs creates a problem for me.
Is there any way to fix this problem? Because I use opacity I'm not able to simply add a dark background to remove the white glimps.
Here's the example:
http://dabblet.com/gist/766f6a238d00bcbb41d4
You can create a filter to add "grout" into the gap :) But it's a hack that works by increasing the opacity of those pixels. It will also roughen up the anti-aliasing of our other edges. Also if you're using opacity in these gradients then you will need to adjust those tableValues below to the range that you want (aka if your fill is 0.4 opacity, then your tableValues would look like "0 .1 .4 .4 .4"). If you have variable opacity in your gradients, then you can play around with other types of component transfers that will preserve the opacity gradients better.
<svg id="background-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 75" >
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="0" id="triangleGradient">
<stop stop-color="black" offset="0"/>
<stop stop-color="blue" offset="1"/>
</linearGradient>
<filter id="mynameisgrout">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .25 1 1 1"/>
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#mynameisgrout)">
<polygon points="0,75 100,75 50,0" fill="url(#triangleGradient)"></polygon>
<polygon points="50,0 150,0 100,75" fill="url(#triangleGradient)"></polygon>
</g>
</svg>
The SVG shape rendering option allows to configure what's important for rendering.
In this case shape-rendering="crispEdges" solves the problem.
See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
I've got an SVG object that contains a linear gradient embedded directly in a document. It works fine in Chrome and Firefox, but in Safari nothing is rendered. If I create the SVG as a file and embed it using the Object tag, it works fine in Safari. Other shapes and fills work, it's just linear gradient that doesn't work. I guess I could use the object, but I'd prefer to embed the SVG directly.
I've create a demo here (works in Chrome, not Safari): http://jsfiddle.net/sjKbN/
I came across this answer which suggests setting the content type to application/xhtml+xml, but this in itself seems to cause other problems.
Just wondering if anyone had come across any other fixes or ideas to get this working.
Your gradient will work in Safari if you wrap a defs tag around it:
<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"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0.0595" style="stop-color:#FFE029"/>
<stop offset="0.1303" style="stop-color:#FFD218"/>
<stop offset="0.2032" style="stop-color:#FEC90F"/>
<stop offset="0.2809" style="stop-color:#FDC70C"/>
<stop offset="0.6685" style="stop-color:#F3903F"/>
<stop offset="0.8876" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>
It seems that wrapping your references in defs is encouraged but not obligatory according to spec. So this is a bug in Safari.
About Alpha : It seems that Safari (7 at this moment) does not cover SVG color alpha channel, use stop opacity attribute. it works fine!
<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok
The accepted answer was not the solution for me.
My problem was the presence of a <base href="/" /> tag in my index file. Simply removing it solved the problem for me.
If you cannot remove it, probably some workaround already exist: found this gist but I did not tested it.
Update
Simply removing the href broke the child routing of my angular app, the proper workaround is to prepend to the linearGradient id with the page relative location. I wrapped the logic in a method like this:
get svgFill(): string {
return `url(${this.location.path()}#${this.gradientId}) white`;
}
The answer is simple, all id's (not only <linear gradient>) need to be UNIQUE for all SVG files.
I had some troubles too making an inline SVG with a linear gradient work. The designer had put a - in the id of the <linearGradient. The solution was as simple as removing it.
<linearGradient id="linear-gradient">
...
<path fill="url(#linear-gradient)" d="..."/>
with
<linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>