SVG fragment identifiers are swapped in Safari when served through webapp - html
I have replicated my problem in the following simple example
I have a simple webpage like the following:
<html>
<head></head>
<body>
<img src="icons.svg#close"></img>
<br>
<img src="icons.svg#error"></img>
</body>
</html>
Viewing this page locally in Safari, the page renders correctly:
where the close icon appears above the error icon.
However, when I serve the file with NodeJS webapp (or use the python SimpleHTTPServer command) and view it in Safari, then the images are in each other's places:
even though the dom still looks correct, and the src attributes of each img tag hold the correct paths.
Here is the icons.svg file:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>:root>svg{display:none}:root>svg:target{display:block}</style>
<svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close">
<path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
</svg>
<svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error">
<style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style>
<path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/>
<path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/>
</svg>
</svg>
The page is rendered correctly in all of the other browsers, regardless of if the file is being loaded locally or served through a server.
This is due to incomplete/buggy SVG fragment CSS support in Safari. Browser support for this technique is still relatively patchy - see https://css-tricks.com/svg-fragment-identifiers-work/
Current versions of Chrome/Safari/Opera (38/8/25) handle all the HTML techniques well, but none of the CSS techniques, including the background-position one.
Here's how my Safari 8 (left) and Chrome (right) render the test page - note that the icons should go every time:
Some experiments with your content follow:
If I repeat the pair of images a second time, the fourth image is somehow a composite of the two (below left). No interpretation of your svg should ever be able to produce an image like this. Interestingly, I get exactly the same split if you use different styling properties, e.g. opacity (below right):
If I zoom in and out with cmd++ and cmd+-, the overlaps and partial images change.
Resizing the page also has an effect.
Speculating that the styling of the images might somehow be interacting with one another, I tried having four different copies of the image (icons1.svg#close, icons2.svg#error etc.) and referring to them separately. This mostly fixed the problem, but the fourth image was missing the bottom three quarters. However, as soon as I resized the window, the missing part of the image appeared.
Bottom line: incomplete/buggy svg fragment identifier/CSS handling.
Related
How to get rid of title on mouse hover on font awesome svg icon (using svg sprites)
Edit: this questions is irrelevant in case you're using Font Awesome v. >= 5.8.0 because its maintainers (after a long discussion:)), agreed that the "title" should be removed from the svg files and it's done in v. 5.8.0 : https://github.com/FortAwesome/Font-Awesome/issues/14595
Now, back to the original question:
I just tried the Font Awesome (5) in its 'svg sprites' version, following the official, pretty simple tutorial: https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites
Everything's working as expected, except I can see a title popping up when I hover on the image (which is bad). I mean the one we see when we have e.g. <div title = "blah"></div>.
So, in compliance with the docs (I guess), I have copied the 'sprites/regular.svg' file to my server and:
<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
<use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>
The '.fa-svg-icon' class, for the sake of completeness:
.fa-svg-icon{
width:1em;
height:1em;
}
What I see, when hoovering the image, is a title "User" showing up. That's is because this is what is declared in the svg file, in "our" fragment:
<symbol id="user" viewBox="0 0 448 512">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 ......"></path>
</symbol>
I tried adding title = 'something' to both the svg element, and the <use> one, but nothing works o.O
This happens on both FX and Chrome.
Edit 1: I made a test page: https://kpion.github.io/stuff/font-awesome-issue/
I'm pretty sure I'm missing something obvious here, because apparently I'm the only one in this world having this problem 😮 Or google is broken. One or the other :)
Edit 2:
To answer a question from comments, here is what my dev tools -> elements in chrome shows (after 'importing' the svg symbol):
<svg class="fa-svg-icon" title="my -not-working-title for user">
<use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
#shadow-root (closed)
<svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
<title id="user-title">User</title>
<path d="M224 256c70.7 0 128-57.3 128-..."></path>
</svg>
</svg>
And no, it does not change when hovering, please bear in mind there is no js involved, either mine or from font awesome.
I'm not able to recreate your code environment in a fiddle to try it myself, but you may try the following CSS code, to get the pointer-events only when the icon has a link:
.fa-svg-icon{
pointer-events: none;
}
.fa-svg-icon a {
pointer-events: auto;
}
Most efficient way to add inline SVG?
I have a webpage with lots of SVG icons that will be in the HTML. Rather than include them as an IMG tag and possibly slow the page with those HTTP requests, I'm placing the SVG code like this: <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg> Note: where it says "lots of code here", there is a huge string of numbers/letters that make up the path for this SVG. The issue this creates is it's very ugly when not easily maintainable in the HTML (to the point where my editor bogs own because these SVG strings are so long). Is there a cleaner, simpler way to include these SVG icons in my HTML while still eliminating the extra HTTP requests? Thanks for your time.
The most proven way is to collect all the icons SVG in one file - the sprite SVG
Creating a Sprite and connecting it to HTML
The action plan is as follows:
Creating a Sprite
Connecting it to HTML
Calling SVG images from the sprite
Styling icons
Creating a Sprite
The main task of the sprite is to be a repository for icons that before the call to a specific place HTML pages should be invisible.
To do this,the code for each icon is wrapped with <symbol id =" .. "> ... </ symbol> tags with a unique identifier, which will be followed by the <use>
Template Sprite:
<div id="container">
<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 126 126" >
<symbol id="picasa">
<path d="M113.5 57.... 72.8z" />
</symbol>
<symbol id="wordpress" viewBox="0 0 126 126">
<path stroke ="black" d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
</symbol>
<symbol id="twitter">
<path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
</symbol>
<symbol id="apple">
<path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
</symbol>
</div>
As you can see, all <path> attributes are removed for later styling of icons from an external CSS file.
Adding a sprite file to HTML
There are several ways to add SVG files to HTML, but the most reliable way is to add it using the <object>
<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
Your browser does not support SVG
</object>
Adding icons from the sprite
<div id="container">
<svg viewBox="0 0 126 126" >
<use xlink:href="#apple"></use>
</svg>
</div>
The viewBox attributes should be like thesvg icon or change the scaling inside HTML if necessary.
Icons as links
For this, in SVG, unlike HTML, its own form of record
<svg viewBox="0 0 126 126" >
<a xlink:href="https://www.apple.com/ru/"><use xlink:href="#apple"></use></a>
</svg>
Styling icons
When using the <use> command, the icon falls into the shadow DOM and its attributes behave strangely, - there is an icon of the icon, but it can not be controlled from the outside.
In addition, the icon attributes for example: style = "fill: gray; stroke: crimson;" have the highest priority. Therefore, we deleted these attributes. see the example of the sprite above.
To solve the problem of inheritance of parental properties by objects in shadow DOM, you must use forced inheritance
svg path{
fill:inherit;
stroke:inherit;
}
and then to the icons you can already apply CSS rules from the external table
svg path:hover{fill:yellow;}
#picasa{fill:black;}
#apple{fill:purple;}
#twitter{fill:black;}
#wordpress{fill:blue;}
If you go for the first time along this path, then inevitably there will be many questions.
Ask, do not be shy.
All sooner or later it turned out to be done and customized sprite.
The main recommendation is to do everything yourself manually for the first time, to understand how it is arranged, and then you can already openly use special utilities to automatically create sprites.
You should convert all your .svg files to one font file, here is how: How to convert .svg files to a font?
css/svg create larger background image
I am trying to replace an existing libraries background image with a slightly larger version. For reference, it is just a little drag handle in the corner of a "draggable" item. Upon inspection, I see the original dev is just setting a little background-image like so: position: absolute; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=) bottom right no-repeat; background-origin: content-box; I am wondering how the data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4= was generated and if it is possible to make my own with just a slightly larger handle. I have access to tools like photoshop/illustrator but I am thinking maybe that is overkill. I want to make the little grey handle maybe 5px larger in each direction. Unsure where to start with this, any advice is welcome. Thanks! Edit - here it is in a codepen http://codepen.io/ajmajma/pen/NAmPQx
The original developer used a clever technique called data URI to avoid an unnecessary request for an image resource*. This is done by using the syntax: data(mime-type;base64,base64-string).
Open a developer tools' console in your browser and run the following code (the base64 string is from your example):
atob('PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=')
The result is how the browser sees this image:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="6px" height="6px"
>
<g opacity="0.302">
<path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/>
</g>
</svg>
You can edit the SVG code as you wish in any visual editor or just textually and then run in the browser's console btoa('updated-svg-code') on it. Wrap the resulting string with data:image/svg+xml;base64,%UPDATED% and use it as a background image.
For more information about atob and btoa JavaScript functions for base64-manipulation, see an article at MDN.
* - note that the price for avoiding an extra request is an increase by 33% of the CSS file size. This is usually mitigated by the usage of GZIP compression, though.
SVG image Has huge gap top and bottom on responsive site in iPad
I want to use an SVG logo on a site I'm developing if the browser supports it. So I have <img src="logo.gif" /> in my HTML and then if the browser supports SVG I swap the src attribute for logo.svg.
This looks great on all devices I've tried it on except a 1st generation iPad that hasn't had its software updated in a few years (it's on iOS 5.1.1). Basically there is a massive gap top and bottom of the logo and I can't work out why. It looks fine on my iPhone 5 with iOS 6.0.2 so I'm thinking it's an iOS 5 and below issue.
My logo.svg file
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="83.323 19.623 445 109" xml:space="preserve">
<polygon fill="#339846" points="121.805,77.839 124.066,86.185 125.199,94.741 125.481,103.087 125.128,110.724 124.42,117.372
123.572,122.604 122.936,126.068 122.654,127.271 126.826,121.333 127.815,125.364 129.229,117.159 129.867,109.379
129.937,102.097 129.512,95.308 128.806,89.297 127.887,83.992 126.826,79.608 125.905,76.215 125.836,76.285 125.623,76.496
125.34,76.709 124.846,76.992 124.278,77.345 123.572,77.558 122.724,77.77 121.805,77.839 "/>
<path fill="#FDCC09" d="M106.488,22.559l-0.14-0.496l1.344,0.354l1.201,0.426l1.201,0.564l1.061,0.637l0.991,0.707l0.919,0.708
l0.85,0.707l0.777,0.707l0.141,2.052l-0.071,1.132l-0.142,0.989l-0.354,1.557l-0.069-0.071l-0.214-0.213l-0.423-0.283l-0.566-0.495
l-0.777-0.637l-1.062-0.777l-1.272-0.92l-1.626-1.061l-0.708-2.333l-0.636-1.908L106.488,22.559z M89.121,39.501l0.638,2.191
l0.424,0.284l0.425,0.284l0.425,0.211l0.425,0.283l0.495,0.283l0.424,0.212l0.424,0.213l0.425,0.212l-0.071-1.981l0.071-1.979
l0.141-1.91l0.283-1.908l-0.849-0.92l-0.848-0.849l-0.778-0.778l-0.637-0.707l-0.565-0.565l-0.495-0.495l-0.283-0.283l-0.072-0.07
l-0.563,2.97l0.069,2.758L89.121,39.501z M122.472,66.818l-0.496-2.687l-0.707-2.759l-1.131-2.546l-1.556-2.262l-0.213-0.283
l-0.707-0.778l-0.92-1.273l-1.061-1.556l-1.062-1.837l-0.989-1.98l-0.707-2.052l-0.353-2.052l0.14-2.191l0.425-2.192l0.495-2.334
l0.566-2.475l-1.203-0.99l-1.272-0.849l-1.272-0.849l-1.272-0.777l-1.273-0.708l-1.272-0.636l-1.272-0.566l-1.204-0.495l-1.06-0.425
l-1.062-0.423l-0.849-0.354l-0.777-0.213l-0.708-0.211l-0.424-0.142l-0.354-0.142h-0.069l-0.777,1.697l-0.637,2.121l-0.637,2.475
l-0.496,2.617l-0.353,2.546l-0.283,2.334l-0.142,1.98v1.344l1.273,0.565l1.273,0.495l1.201,0.495l1.202,0.424l1.202,0.496
l1.131,0.495l1.062,0.637l0.99,0.637l1.556,1.414l1.273,1.697l1.201,1.909l0.92,1.838l0.707,1.769l0.566,1.484l0.283,0.99
l0.141,0.353l0.707,1.981l0.989,1.98l1.274,1.839l1.413,1.838l1.557,1.696l1.697,1.557l1.696,1.414l1.768,1.273l0.072-0.99
l0.07-1.697l-0.07-2.192L122.472,66.818z M136.039,50.604l-1.062-4.386l-1.696-4.242l-2.193-3.96l-2.545-3.749l-2.688-3.394
l-2.757-3.04l-2.617-2.617l-2.263-2.122l-1.838-1.556l-1.273-0.989l-0.425-0.354l1.838,3.96l0.921,3.536l0.212,3.253l-0.212,2.97
l-0.496,2.758l-0.637,2.546l-0.423,2.475l-0.142,2.334l0.354,2.051l0.777,2.051l0.918,1.98l1.133,1.838l1.062,1.556l0.919,1.272
l0.708,0.779l0.212,0.282l1.626,2.475l1.132,2.688l0.707,2.899l0.354,2.758l0.141,2.475v2.051l-0.069,1.344l-0.072,0.496
l4.668-4.385l3.254-4.455l1.908-4.598l0.777-4.526L136.039,50.604z M118.683,74.71l-1.485-1.204l-1.769-1.626l-1.838-1.908
l-1.769-2.263l-1.556-2.547l-1.062-2.686l-0.069-0.354l-0.354-0.989l-0.496-1.486l-0.776-1.769l-0.921-1.909l-1.131-1.909
l-1.344-1.768l-1.557-1.415l-0.989-0.636l-1.061-0.566l-1.061-0.496l-1.203-0.424l-1.2-0.425l-1.273-0.495l-1.273-0.495
l-1.272-0.565l-1.272-0.708l-1.345-0.777l-1.272-0.92l-1.272-1.06l-1.274-1.273l-1.202-1.485l-1.131-1.768l-1.132-1.979v0.565
l0.142,1.556l0.211,2.475l0.426,3.111l0.636,3.678l0.92,4.03l1.201,4.173l1.557,4.243l2.05,4.103l2.476,3.746l2.97,3.395
l3.536,2.688l4.102,1.91l4.809,0.918l5.516-0.211l6.223-1.485l-0.352-0.283L118.683,74.71z"/>
<path fill="#339846" d="M181.058,59.69c-5.656,0-10.842,2.452-14.237,6.506h-0.189l5.47-26.307h-13.672l-9.336,46.579
c-0.564,2.829-1.037,5.658-1.037,8.486c0,8.203,5.47,12.918,16.407,12.918c20.743,0,30.55-17.16,30.55-32.152
C195.014,67.517,190.676,59.69,181.058,59.69z M167.292,97.595c-3.111,0-5.092-1.79-5.186-5.091
c-0.095-1.981,0.188-3.584,0.471-5.092l0.849-3.771c1.603-8.016,6.412-13.013,11.314-13.013c4.148,0,6.034,3.489,6.034,8.015
C180.774,86.657,175.118,97.595,167.292,97.595z M227.354,59.69c-16.406,0-27.533,13.106-27.533,29.136
c0,11.409,7.826,19.047,19.519,19.047c16.029,0,27.533-12.353,27.533-29.23C246.872,68.177,239.705,59.69,227.354,59.69z
M221.225,97.501c-4.714,0-7.354-3.584-7.354-8.958c-0.094-7.166,3.865-18.574,11.691-18.574c5.47,0,7.261,4.525,7.261,8.769
C232.822,86.657,228.674,97.501,221.225,97.501z M290.997,39.89l-3.959,20.839c-1.981-0.755-4.432-1.038-6.317-1.038
c-17.445,0-29.043,14.71-29.043,30.738c0,11.222,6.506,17.444,14.332,17.444c5.375,0,11.033-2.357,15.087-8.486h0.188l-0.66,7.449
h12.447c0.188-5.468,1.037-12.068,2.168-17.916l9.334-49.03H290.997z M282.7,84.018c-1.791,8.768-6.601,12.917-10.466,12.917
c-3.961,0-6.413-3.11-6.413-8.674c0-8.863,5.752-18.292,13.862-18.292c2.263,0,4.337,0.754,5.374,1.603L282.7,84.018z
M351.155,60.729l-16.502,33.095c-6.128,12.258-11.597,20.65-17.727,26.402c-5.374,5.092-11.786,7.354-14.805,7.825l-3.016-11.598
c2.168-0.659,5.186-1.791,7.825-3.676c3.112-2.17,5.752-4.904,7.449-8.017c0.472-0.659,0.472-1.226,0.283-2.264l-9.146-41.769
h14.331l2.83,20.083c0.66,4.714,1.132,8.015,1.51,10.938h0.188c1.037-2.735,2.074-5.752,4.053-10.749l8.393-20.272H351.155
L351.155,60.729z M380.384,79.68l12.823,27.156h-15.086l-8.108-19.707l-5.092,4.903l-2.829,14.804h-13.484l12.636-66.946h13.482
l-7.542,40.073h0.188c1.414-1.791,2.829-3.583,4.149-5.28l11.787-13.955h16.688L380.384,79.68z M406.784,60.729h13.578l-8.77,46.107
h-13.578L406.784,60.729z M423.286,47.339c0,4.809-3.679,7.638-8.015,7.638h-0.095c-3.677,0-6.506-2.546-6.506-6.6
c0.095-4.622,3.677-7.732,7.826-7.732C420.457,40.644,423.286,43.284,423.286,47.339z M469.677,72.23
c0,2.075-0.379,5.562-0.753,7.826l-5.093,26.779h-13.578l4.809-25.553c0.283-1.604,0.471-3.489,0.471-5.187
c0-3.205-1.132-5.469-4.525-5.469c-4.432,0-9.618,5.562-11.504,15.747l-3.866,20.461h-13.578l5.847-31.117
c1.131-5.845,1.886-10.937,2.452-14.99h12.068l-0.942,7.637h0.188c4.337-6.035,10.09-8.675,16.217-8.675
C465.434,59.69,469.677,64.312,469.677,72.23z M514.748,39.89l-3.962,20.839c-1.979-0.755-4.431-1.038-6.318-1.038
c-17.443,0-29.041,14.71-29.041,30.738c0,11.222,6.505,17.444,14.332,17.444c5.374,0,11.032-2.357,15.087-8.486h0.188l-0.659,7.449
h12.445c0.188-5.468,1.037-12.068,2.169-17.916l9.334-49.03H514.748z M506.449,84.018c-1.792,8.768-6.601,12.917-10.466,12.917
c-3.962,0-6.413-3.11-6.413-8.674c0-8.863,5.752-18.292,13.86-18.292c2.264,0,4.339,0.754,5.377,1.603L506.449,84.018z"/>
</svg>
My site is responsive so I don't mention height or width in my HTML or SVG and then I set img { max-width:100%; } in my CSS. Does anyone know what could be causing this and how I can fix it?
I had a similar issue on one of the sites I was working on. It has something to do with setting a width on the SVG element but no height so instead of using a reasonable height it will base the height of the SVG on the body of the document. To get around this, you can use the 1% hack for IOS devices.
svg{
height: 1%;
}
So far I have tested this on all modern browsers and devices and the results are as expected.
Why is my SVG document using a copy of itself in place of an image in Google Chrome?
I have an SVG document here On firefox, everything works as expected. However, google chrome appears to think this line: <image ... xlink:href="/textures/Cube top.png" /> references http://minecraft-cube.comuv.com/index.svg, not http://minecraft-cube.comuv.com/textures/Cube top.png, resulting in unexpected recursion. Obviously, I'd much prefer it if it used the image I specify. What is going on here? EDIT: Filed bug #68732 in Chrome. May still be doing something wrong though.
I think that your problem exists elsewhere. Here is a simplified version of your document that correctly shows the linked image: <?xml version="1.0" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <g id="top-tile"> <image width="1" height="1" x="-0.5" y="-0.5" class="face" xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" /> </g> </defs> <g transform="scale(16)"> <g transform="translate(1.5, 1.5)"> <use xlink:href="#top-tile" /> </g> </g> </svg> If I use absolute paths to your images and remove the clip-path attributes I see your images in Safari and Chrome. If I put the clip-path back in I see all black fill in Safari, but what is presumably correct in Chrome. If you put in absolute paths (e.g. xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png") does it work for you in Chrome? Now that I see what you are trying to make, I wish I could give you +2 for making a fold-up Minecraft tile :) Edit Next Steps: Remove the space from your file name. Try using a relative path instead of absolute. Now that we know better the core issue, Google for more answers (I haven't found any) Pare it down to a trivial test case and file a bug against Chrome. Edit 2: As shown in the updated question, #Eric did file a bug against Chrome. As shown in that bug report, newer versions of Chrome display the intended result. Further, a slightly modified test case using explicit pixel-based image height and width, and pixel-based SVG viewBox and dimensions works in all browsers tested.