Inline Svg Breaks in Safari and Mobile Safari

Why is my inline svg not displayed properly on Safari (desktop and mobile)?

Add a width and a height to the use elements:

<p style="font-size: 2.3em; text-align: center;"><a href="#">
  <svg width="135px" viewBox="0 0 563 301" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-top: 16px;">
    <!--Definition of one volunteer symbol -->
    <symbol id="volunteer"  viewBox="0 0 200 301" style="fill: var(--color-1);">
        <circle id="head" cx="101" cy="30" r="30" />
        <path id="body" d="M189.34,44.94c-9.88,10.26-20.74,21.77-31.9,33-4.46,4.49-9.1,9.16-14.49,12.3-8.16,4.76-9.64,11.23-9.58,20.06q.66,86.7.15,173.4c0,5.13-2.44,11.54-6,14.91-2.55,2.39-9.93,2.33-13.37.32s-6.17-7.77-6.24-11.93c-.52-32.66-.28-65.33-.38-98,0-7.29-3.35-10.29-8.38-7.19-2.06,1.26-3,5.73-3,8.74-.15,32.09.07,64.17,0,96.26,0,11.05-7.79,16.8-17.68,13.4-6.87-2.36-8.51-7.92-8.5-14.48Q70,245,70,204.23c0-33-.16-65.91.09-98.86,0-5.46-1.76-8.62-5.82-12.3C45.4,76,27.09,58.43,8.67,41a48,48,0,0,1-4.84-6.1c-4.29-5.66-5.9-11.47.1-16.92,5.29-4.79,12.59-3.43,18.37,2.52,12.07,12.42,24.54,24.46,36.47,37C77.05,76.7,99.14,79,123.19,72.41a27.75,27.75,0,0,0,11.08-6.48C149.65,51.56,165,37.11,179.78,22.15c7.77-7.86,14.16-8.68,21.88-1.1,0,0,3.34,2.5-.66,9.5Z" />
    </symbol>
    <!-- Setting the symbols in place - left, middle, right  -->
    <use xlink:href="#volunteer" x="0" y="0" width="200" height="301" style="opacity:1.0" />
    <use xlink:href="#volunteer" x="180" y="0" width="200" height="301" style="opacity:.4" />
    <use xlink:href="#volunteer" x="360" y="0" width="200" height="301" style="opacity:1.0" />
</svg></a></p>
<h3 style="text-align: center;"><a href="#">Headline</a></h3>
<p style="text-align: center;">Lorem ipsum <a href="#">Link text</a></p>

Mobile Safari SVG Problem

Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

</body>
</html>

The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is
"Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.

Not sure if Ipad cares about the Content-Type but other browsers do.

Updated

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

Inline SVG disappears in iOSand Safari when a CSS filter is applied

Annoying that this doesn't work, but Safari is the new IE after all! :P

A workaround is to wrap the SVG in another element and apply the filter to that.

Problem rendering SVG in Chrome mobile and iOS Safari mobile

I managed to correct
good through this post

Clipping path in SVG not working in Safari
and this post http://tutorials.jenkov.com/svg/clip-path.html
but I had to make some adaptations...

how did i fix this problem

1st first
had to change inline structure that comes before all sinline svgs

before:[enter image description here][1]
[1]: https://i.stack.imgur.com/W8Pbl.jpg
after:
enter image description here

so far I had already converted all patches into points

tools that helped me in this work:

1st crucial tool because it is possible to convert paths code into points codes for polygon
https://codepen.io/team/amcharts/full/zYORoNE software built on the code pen

2st another tool to remove parts of unnecessary text such as curly braces ({}) spaces and commas that because the conversion tool transforms results into arrray

http://www.unit-conversion.info/texttools/replace-text/

3st another tool to remove lines breaks
https://www.textfixer.com/tools/remove-line-breaks.php

4st another last tool but not less important because it is possible to test directly online before inserting it in the code definitively
https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_polygon

that was a good tool

final result :

before
before applying any new structure

after: after applying any new structure

I want to thank all the devs who collaborated with me, either by creating the free software and the post made, my thanks to everyone, the people of the stackoverflow, thanks!

Choppy SVG rendering during rotation in Mobile Safari

So I couldn't end up solving this issue properly on my real example. I ended up reverting to images (I split up my large image into 9 smaller images and tiled them to get around iOS' 5mp limit), and on each image I applied the following property which seems to cache the image:

-webkit-transform-style: preserve-3d;

It doesn't scale as nicely, but it works smoothly which is more important.

Safari not rendering SVGs to the desired size/height (SVGS are clipped)

I figured out a combinations of CSS settings that now make the SVGs Render in entirety in Safari (as well as in Chrome, Firefox, and Edge); Safari no longer clips them/cuts them off. My sizing and calculations are not perfect, but the display settings work, you will need to tweak the size according to your own needs adjusting the height of the SVG container/parent. My javascript (which controls other aspects of the page) are wonky, but the SVG settings are more or less correct. I hope this helps someone.

Here is the codepen: http://codepen.io/ihatecoding/pen/zBgqgp

The inline html declaration of the SVG

I adjusted my viewBox and removed my overflow: visible setting according to the suggestions of @Paul Lebeau Note that the preserveAspectRatio is intentionally not specified because it should remain with the default setting, xMidYMid meet (unlike other Safari SVG fixes which change it to none).

Here is the code:

 <svg class="areaSVG notFixed index" viewBox="0 0 80 80"  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

The CSS

If you are not using my javascript to resize the svgs, use the following css settings for the SVG container (.ey-col-svg) and the SVG itself (.areaSVG):

/* the SVG parent/container */

.ey-col.svg {
    display: block;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}

/* the SVG itself */

.areaSVG {
    display: inline-block;
    max-height: 15vh; 
    box-sizing: content-box;
    margin: 0;
}

Notes about my javascript

If you are using my messy javascript, please note both the container and the SVG will both initially have the setting display: none in the CSS, and then the javascript will change both of them to have the same displays settings I have shown above [with the container (.ey-col-svg) set to display: block and the SVG (.areaSVG) set to display: inline-block].

Also, my javascript in my codepen has changed. It now works better if I adjust the height of the container (.ey-col-svg) instead of the of SVG (.areaSVG) itself. Another option that might work better for users is changing the max-height of the container, instead of the height (as I have done).