Tyler Tyler - 2 months ago 6
HTML Question

SVG fragment identifiers are swapped in Safari when served through webapp

I have replicated my problem in the following simple example

I have a simple webpage like the following:

<img src="icons.svg#close"></img>
<img src="icons.svg#error"></img>

Viewing this page locally in Safari, the page renders correctly:

Correct rendering

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:

In correct rendering

even though the dom still looks correct, and the
attributes of each
tag hold the correct paths.

Here is the

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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 7.3l4.4 4.4c. 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/>
<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"/>

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 enter image description here every time:

enter image description here

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):

enter image description here opacity version

If I zoom in and out with cmd++ and cmd+-, the overlaps and partial images change.

enter image description here enter image description here

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.