I'm creating a contact sheet that displays all the icons in a library. I've built it using nested SVGs. Here's a minimal version:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 200 200">
<svg id="sheet_core" width="200" height="200" x="0" y="0">
<svg width="200" height="200" x="0" y="0">
<symbol id="piece" viewBox="-2.5 -2.5 105 105">
<circle r="50" cx="50" cy="50" data-playerfill="true" fill="#ffffff" stroke-width="5" stroke="#000000"></circle>
</symbol>
<use href="#piece" x="25" y="25" transform="matrix(0.75,0,0,0.75,6.25,6.25)"></use>
<text x="0" y="192.1015625" svgjs:data="{"leading":"1.3"}">piece</text>
</svg>
</svg>
</svg>
This works fine in Chrome and Opera, but does not work in Firefox.
You should see this: https://ibb.co/VT8SSSd.
But in Firefox, I get this: https://ibb.co/5L7PP22.
If I inspect the code, the <symbol>s are greyed out, suggesting they are not being referenced, when they very clearly are right afterwards. I also tried moving all the symbols into a global <defs>, but that didn't work either. Any ideas how to tweak this so it will work in Firefox too?
These SVG browser differences are maddening, I've got to say.
Once I loaded the SVG on my website so I could test in some different environments, it suddenly started working. My suspicion is there's some weird CSPF happening, perhaps only on my end. But the SVG does not appear to be the fundamental problem.
As you were.
Related
I have a fairly simple SVG which I've converted into a SSCCE. Here's the SVG (and a fiddle you can see for yourself):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect id="leader" width="100%" height="100%" stroke="red" fill="none" />
<svg id="left" x="5%" y="5%" width="40%" height="85%">
<rect width="100%" height="100%" fill="blue"/>
</svg>
<svg id="left" x="55%" y="5%" width="40%" height="85%" transform="scale(.5)">
<rect width="100%" height="100%" fill="red"/>
</svg>
</svg>
I'm expecting a large, empty red rectangle containing two smaller rectangles: one blue one which takes up quite a bit of space and another one (red) which is half the size of the blue one. There is a translation which occurs as well, but that's not terribly important for this question.
In Firefox, I get the expected image, which is this:
However, when I view the same image in Chrome (or Safari), it seems to be ignoring my transformation, and the two rectangles are both the same size:
Is there something wrong with my SVG, is this a bug in either of these browsers, or is this an unsupported part of SVG in Chrome/Safari? There is an old bug from early 2017 which is reported to be fixed, so I'm thinking that I'm missing something about the way SVG transforms are supposed to work.
The transform attribute for an <svg> element has only been introduced for SVG 2. For now it is not supported in all browsers. (Setting a version attribute on the root element has no effect.)
You can achieve the same effect if you wrap the <svg> element with a <g> and define the transformation there. The percentage values for the positioning will still be relative to the nearest parent element establishing a viewport, which is the outer <svg>.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="leader" width="100%" height="100%" stroke="red" fill="none" />
<svg id="left" x="5%" y="5%" width="40%" height="85%">
<rect width="100%" height="100%" fill="blue"/>
</svg>
<g transform="scale(.5)">
<svg id="left" x="55%" y="5%" width="40%" height="85%">
<rect width="100%" height="100%" fill="red"/>
</svg>
</g>
</svg>
The bug you referenced, btw, does not apply. It's not easy to see at first glance, but the attached test case shows this refers to setting a transformation on a <g> element via script.
The following attempt to make a rectangle with a pattern fill doesn't seem to work in Safari 6.1, Firefox 30, or Chrome 36, even though the W3 spec seems to say that a I can use a non-local IRI reference, including a relative one, like fill="url(localURL.svg#MyId)".
test.html
<html>
<head>
<style>
.patterned { fill: url("patterns.svg#polkadot");
stroke: lime; stroke-width: 5px}
</style>
</head>
<body>
<svg width="500" height="500">
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>
patterns.svg
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
</svg>
Safari and Chrome show a black-filled green-outlined rectangle. Firefox shows an empty or white-filled green-outlined rectangle. None of them show the pattern of purple circles.
I'm trying this approach because I couldn't get an SVG fill pattern to work on Safari in the Backbone+JQuery+D3 project I'm working on using the most common method, an inline defs with fill="url(#MyId)". I couldn't get that approach to fail as a simple test case -- I thought I had, but that turned out to be a different Safari bug with an obvious workaround. At least that approach worked in some browsers.
You've a load of syntax errors in your patterns.svg file. Missing " characters round attribute values, an unclosed circle element, patternunits instead of patternUnits.
SVG standalone must be valid XML, it's not as forgiving as html and it's case sensitive on attribute names too. If you loaded the patterns.svg file directly, browsers would tell you all these things.
With all this fixed (as below) this works in Firefox. I'm not sure Chrome/Webkit have implemented this yet.
<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx="12" cy="10" fill="purple"/>
</pattern>
</defs>
</svg>
I have an html page with two svg use elements:
The first references inline svg.
The second references an external svg file (same code).
I am trying to figure out why the second example does not show the svg paths even though the SVG code that is inline is exactly the same as the SVG code in the linked file.
https://s3.amazonaws.com/jagger/svg/index.html
<svg class="svg-inline">
<use xlink:href="#test" />
</svg>
<svg class="svg-external">
<use xlink:href="sprite.svg#test" />
</svg>
<svg width="0" height="0">
<symbol id="test" viewBox="0 0 600 600">
<title>Test Icon</title>
<rect id="svg_2" height="214.39594" width="481.62782" y="10" x="10" stroke-width="5" stroke="#000000" fill="none"/>
<line fill="none" stroke="#000000" stroke-width="5" x1="10" y1="10" x2="400" y2="400" id="svg_1"/>
</symbol>
</svg>
using of external sprite is working in the latest version of all modern browsers
still problem in actual IE and older browsers versions
see MDN <use> browser_compatibility table
for IE (and older browsers) just use polyfill svg4everybody
I'm working on a portfolio (http://www.chloémorillon.com/) website and I've got a problem when I checked it throught all the web browsers. It work well on chrome, but when I check it with Safari, the browser keep refreshing the page until it crash definitely.
I use SVG to render the parallepipeds so I think that the problem come from there...
Here's the code for each shaped box :
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="485" width="305" class="svg-graphic">
<filter id="grayscale">
<feColorMatrix values="0" type="saturate"/>
</filter>
<g>
<clipPath id="hex-mask">
<polygon points="200, 0 200,284 0,384 0, 100"/>
</clipPath>
</g>
<a xlink:href="http://xn--chlomorillon-eeb.com/projets/">
<polygon transform="translate(2, 6)" points="200, 0 200,284 0,384 0, 100" stroke-width="10" stroke="#1a171b" fill="#1a171b"/>
<polygon transform="translate(2, 6)" points="200, 0 200,284 0,384 0, 100" stroke-width="10" stroke="#75ffba" fill="#75ffba" id="bandw"/>
<image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" clip-path="url(#hex-mask)" id="color"/>
<image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" filter="url(#grayscale)" clip-path="url(#hex-mask)" id="bandw"/>
</a>
</svg>
Do you have any clue about my problem ?
Just some general debugging help: when things fail try removing code until you find the offending piece of code. I'd start by removing the filter, since Safari 5 does not support SVG filters. This should not cause a crash (it should just ignore the filter) but you never know.
Another possible failure point is the utf-8 domain http://xn--chlomorillon-eeb.com, try a relative path (just <a xlink:href="/projets">).
Once you identify the piece of code that is causing the crash you can devise a workaround, either with javascript or a fallback for Safari 5.
Link : http://jsfiddle.net/xkpeD/
or just
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"/>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
It displays ok in all browsers (IE9, Chrome, Firefox, Safari 5.1), but in new Safari 6 only 1 circle is rendered. Seems that all <use> tags doesn't rendered in Safari 6.
Any help please?
I had the same issue, OP. I solved it by doing 2 steps
Separated the <use> and the <defs> into 2 different <svg>'s (not sure if this step is necessary, also had to do it for other reasons). Side note, if an <svg> only has <defs>, you can use style="display: none;" to make it not take space in the layout.
Moved the <svg> containing the <defs> ABOVE the <svg> containing the <use> in my HTML. This step is crucial.
Hope this helps. Necessary and working for Safari Version 7.1.2 as of today, 12/19/14
sam.kozin's answer worked for me. Just so that this answer actually has visibility.
Replace <use ... /> with <use ...></use>
So:
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"></use>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
I was using <use href=""> that was rendering without issues in Firefox / Chrome, but not in Safari. So I had to change to <use xlink:href=""> and this fixed my rendering issues in Safari.
Check if you are using correct http content-type header and serving your document as valid XML. More info in this similiar question.