Problem with svg() usage

1

Hello!

I am trying to inline an (optimized) SVG using the svg() helper. Somehow this SVG shows up on all my desktop browsers, but on neither of my iOS (iPhone or iPad, Safari, Chrome and/or Firefox) devices.

I use it this way:

<ul>
      <li class="nav-item"><a class="nav-link" href="https://twitter.com/neugierig_fm"><?= svg('/assets/images/icon-twitter.svg') ?></a></li>
</ul>

In my website source it shows up like this:

<ul>
      <li class="nav-item"><a class="nav-link" href="https://twitter.com/neugierig_fm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.3 40"><path d="M49.3 4.7c-1.8.8-3.8 1.3-5.8 1.6C45.6 5 47.2 3.1 47.9.7c-2 1.2-4.1 2-6.4 2.5C39.6 1.2 37 0 34.1 0 28.5 0 24 4.5 24 10.1c0 .8.1 1.6.3 2.3C15.9 12 8.4 8 3.4 1.9c-.8 1.4-1.3 3.2-1.3 5 0 3.5 1.8 6.6 4.5 8.4-1.7-.1-3.2-.5-4.6-1.3v.1c0 4.9 3.5 9 8.1 9.9-.8.2-1.7.4-2.7.4-.7 0-1.3-.1-1.9-.2 1.3 4 5 6.9 9.4 7-3.5 2.7-7.8 4.3-12.6 4.3-.8 0-1.6 0-2.4-.1 4.6 3 9.9 4.6 15.6 4.6 18.6 0 28.8-15.4 28.8-28.8V9.9c1.9-1.4 3.6-3.1 5-5.2z" fill="#2f271a"></path></svg></a></li>
</ul>

And as said … this works in my desktop browsers. If i now edit my source and hardcode the SVG into the site myself using the following, it shows up on iOS:

<svg><use href="#icon-twitter-test"><symbol id="icon-twitter-test" viewBox="0 0 49.3 40"><path d="M49.3 4.7c-1.8.8-3.8 1.3-5.8 1.6C45.6 5 47.2 3.1 47.9.7c-2 1.2-4.1 2-6.4 2.5C39.6 1.2 37 0 34.1 0 28.5 0 24 4.5 24 10.1c0 .8.1 1.6.3 2.3C15.9 12 8.4 8 3.4 1.9c-.8 1.4-1.3 3.2-1.3 5 0 3.5 1.8 6.6 4.5 8.4-1.7-.1-3.2-.5-4.6-1.3v.1c0 4.9 3.5 9 8.1 9.9-.8.2-1.7.4-2.7.4-.7 0-1.3-.1-1.9-.2 1.3 4 5 6.9 9.4 7-3.5 2.7-7.8 4.3-12.6 4.3-.8 0-1.6 0-2.4-.1 4.6 3 9.9 4.6 15.6 4.6 18.6 0 28.8-15.4 28.8-28.8V9.9c1.9-1.4 3.6-3.1 5-5.2z" fill="#2f271a"></path></symbol></use></svg></a></li>

Anyone experienced the same using the SVG helper?

Thanks for help, insights, ideas …

/marc

PS: attached screenshots → iPhone, desktop (narrow) and desktop (wide)

screenshot-iphone-firefox
screenshot-iphone-firefox1125Ă—2436 252 KB
screenshot-desktop-firefox-narrow
screenshot-desktop-firefox-narrow450Ă—1056 67.3 KB
screenshot-desktop-firefox-wide
screenshot-desktop-firefox-wide1957Ă—1187 224 KB

2

Seems like a mobile safari issue at first sight?

Afaik the svg() helper only reads the contents of the svg file and echos it. So, does it work if you exactly copy the contents of the svg file and paste it in your code where you used the svg helper? If that doesn’t work, it most probably is a problem with your SVG file?

3

Hey Bart.

Well, I thought the same. But that could actually not be the solution to include all the other stuff in the actual SVG. And the file is perfectly fine sadly. But thanks for your input!

4

What do you mean?

If there’s more “stuff” in the SVG, then it is displayed anyway if you use the svg helper as that’s what it does: it “dumps” the SVG file as inline content.

5

Is what you show as the result of the PHP code what you see in the desktop browser? Because there seems to be something missing.

This is the content of your svg file, right:

<svg><use href="#icon-twitter-test"><symbol id="icon-twitter-test" viewBox="0 0 49.3 40"><path d="M49.3 4.7c-1.8.8-3.8 1.3-5.8 1.6C45.6 5 47.2 3.1 47.9.7c-2 1.2-4.1 2-6.4 2.5C39.6 1.2 37 0 34.1 0 28.5 0 24 4.5 24 10.1c0 .8.1 1.6.3 2.3C15.9 12 8.4 8 3.4 1.9c-.8 1.4-1.3 3.2-1.3 5 0 3.5 1.8 6.6 4.5 8.4-1.7-.1-3.2-.5-4.6-1.3v.1c0 4.9 3.5 9 8.1 9.9-.8.2-1.7.4-2.7.4-.7 0-1.3-.1-1.9-.2 1.3 4 5 6.9 9.4 7-3.5 2.7-7.8 4.3-12.6 4.3-.8 0-1.6 0-2.4-.1 4.6 3 9.9 4.6 15.6 4.6 18.6 0 28.8-15.4 28.8-28.8V9.9c1.9-1.4 3.6-3.1 5-5.2z" fill="#2f271a"></path></symbol></use></svg>

What I see in Firefox dev tools as the result is this:

<ul>
      <li class="nav-item"><a class="nav-link" href="https://twitter.com/neugierig_fm"><svg><use href="#icon-twitter-test"><symbol id="icon-twitter-test" viewBox="0 0 49.3 40"><path d="M49.3 4.7c-1.8.8-3.8 1.3-5.8 1.6C45.6 5 47.2 3.1 47.9.7c-2 1.2-4.1 2-6.4 2.5C39.6 1.2 37 0 34.1 0 28.5 0 24 4.5 24 10.1c0 .8.1 1.6.3 2.3C15.9 12 8.4 8 3.4 1.9c-.8 1.4-1.3 3.2-1.3 5 0 3.5 1.8 6.6 4.5 8.4-1.7-.1-3.2-.5-4.6-1.3v.1c0 4.9 3.5 9 8.1 9.9-.8.2-1.7.4-2.7.4-.7 0-1.3-.1-1.9-.2 1.3 4 5 6.9 9.4 7-3.5 2.7-7.8 4.3-12.6 4.3-.8 0-1.6 0-2.4-.1 4.6 3 9.9 4.6 15.6 4.6 18.6 0 28.8-15.4 28.8-28.8V9.9c1.9-1.4 3.6-3.1 5-5.2z" fill="#2f271a"></path></symbol></use></svg></a></li>
</ul>

So that looks like the desired output to me.

And on my iPhone it comes out correctly as well, but my iPhone is a couple of years old (iPhone 6).

After all, the svg() helper does nothing but read the contents of the svg file (using F::read() internally with some bells and whistles).

6

What the SVG contains is in the second codeblock:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.3 40"><path d="M49.3 4.7c-1.8.8-3.8 1.3-5.8 1.6C45.6 5 47.2 3.1 47.9.7c-2 1.2-4.1 2-6.4 2.5C39.6 1.2 37 0 34.1 0 28.5 0 24 4.5 24 10.1c0 .8.1 1.6.3 2.3C15.9 12 8.4 8 3.4 1.9c-.8 1.4-1.3 3.2-1.3 5 0 3.5 1.8 6.6 4.5 8.4-1.7-.1-3.2-.5-4.6-1.3v.1c0 4.9 3.5 9 8.1 9.9-.8.2-1.7.4-2.7.4-.7 0-1.3-.1-1.9-.2 1.3 4 5 6.9 9.4 7-3.5 2.7-7.8 4.3-12.6 4.3-.8 0-1.6 0-2.4-.1 4.6 3 9.9 4.6 15.6 4.6 18.6 0 28.8-15.4 28.8-28.8V9.9c1.9-1.4 3.6-3.1 5-5.2z" fill="#2f271a"></path></svg>

What you see on the website now is the manually included SVG and extended tags around it, so that it works.

7

Ok, that was a bit misleading. I thought you were saying that something is wrong with the svg helper. But that seems to be rather an issue with mobile Safari, at least newer versions, because the SVG comes out alright even without the extended tags on my old iPhone.

As I wrote, the svg helper does nothing but output the contents of your svg file.

8

How are the SVGs created? I find exporting from Sketch and then running through SVGOMG works great with Kirby. Ive done the same from Affinity Designer too. I find Illustrator adds alot of unneccesary stuff to the SVG.

9

FWIW I also use svgo to optimize my svg’s. The added advantage over svgomg is that you can do it in batch.

PS: svgomg uses svgo behind the curtains :wink:

10

Oh sure… i actually use Imgoptim which can do it in batch if you have SVGO globally installed. You can just turn it on in the imageoptim preferences. Drag and drop ftw.

11

The other thing you can do, as i think this is just a small set of social media icons, is do them as data URIs in CSS.

12

Does Safari on the iPhone actually output anything if you inspect the source code?

13

What happens if you hit this file directly on the devices it doesnt work in?

14

Maybe it’s due to missing with and height attributes in the SVG? IIRC I’ve had issues in the past because of that (but it was in IE I think, not mobile safari).

1 Like
15

+1 for the idea of @bvdputte with the width="" and height="" attributes.

If your main reason for using inline SVG is not to minimize the requests but to style the SVG via CSS you could also use the <object> tag to include the SVG.