CODEWITHSUNDEEP
svg
Yash
Yash

Reputation: 788

SVG is not displaying in the mobile

I have written an SVG code, it is working perfectly on the desktop, but not working on mobile devices. I also have referred to the previous SVG questions, but they are not helpful

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11565.35433070866" height="4006.2992125984247" viewBox="0 0 11565.35433070866 4006.2992125984247" overflow="hidden" id="svgcontent" style="">
   <g>
      <title>background</title>
      <rect fill="#FFF" id="canvas_background" stroke-width="0" height="4006.29921" width="11565.35433" y="0" x="0"></rect>
   </g>
   <g>
      <title>Layer 1</title>
      <image x="16.33879" y="5.77534" width="11532.67714" height="3994.74844" preserveAspectRatio="none" id="svg_2" orighref="path/to/img" templatesrc="path/to/img" xlink:href="path/to/img" origwidth="16626" origheight="5759" lock="true"></image>
      <g label="Age" max-char="2" isrequired="true" yscale="1" xscale="1" elembboxheight="2253.91772" elembboxwidth="1446.53174" shapeval="0" shapeid="0" lineheight="1" font-style="normal" font-weight="normal" text-anchor="start" fill="ee3b25" font-family="Gogono Cocoa Mochi" font-size="3000" text="3" type="text" id="svg_4">
         <path d="m7308.22719,2397.90878c100,33.33333 108.33333,158.33333 166.66667,241.66667c233.33333,50 316.66667,-216.66667 141.66667,-308.33333c-141.66667,-8.33333 -275,-41.66667 -391.66667,-83.33333c-50,-116.66667 -66.66667,-225 -41.66667,-325c116.66667,-50 241.66667,-83.33333 375,-91.66667c108.33333,-100 116.66667,-250 58.33333,-383.33333c-66.66667,-58.33333 -225,-41.66667 -191.66667,66.66667c100,308.33333 -458.33333,375 -566.66667,116.66667c-300,-700 825,-1008.33333 1233.33333,-475c108.33333,141.66667 183.33333,333.33333 150,583.33333c-16.66667,125 -133.33333,250 -316.66667,375c208.33333,83.33333 358.33333,241.66667 325,541.66667c-50,500 -875,625 -1266.66667,316.66667c-108.33333,-158.33333 -225,-341.66667 -133.33333,-541.66667c58.33333,-16.66667 208.33333,-33.33333 458.33333,-33.33333c0,0 0,0 0,0" stroke-width="0" fill="#ee3b25" id="svg_5"></path>
         <rect opacity="0" fill="#ee3b25" height="2253.91748" width="1446.53125" y="886.26029" x="6808.00671" id="svg_6"></rect>
      </g>
   </g>
</svg>

output

Upvotes: 0

Views: 83

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17334

It is actually displaying but to to your pretty large width and height values, you will need to scroll for some minutes ...

Just remove them and make sure your svg has an appropriate width like 100% (default)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 11565.35433070866 4006.2992125984247" overflow="hidden" id="svgcontent" style="">
   <g>
      <title>background</title>
      <rect fill="#FFF" id="canvas_background" stroke-width="0" height="4006.29921" width="11565.35433" y="0" x="0"></rect>
   </g>
   <g>
      <title>Layer 1</title>
      <image x="16.33879" y="5.77534" width="11532.67714" height="3994.74844" preserveAspectRatio="none" id="svg_2" orighref="path/to/img" templatesrc="path/to/img" xlink:href="path/to/img" origwidth="16626" origheight="5759" lock="true"></image>
      <g label="Age" max-char="2" isrequired="true" yscale="1" xscale="1" elembboxheight="2253.91772" elembboxwidth="1446.53174" shapeval="0" shapeid="0" lineheight="1" font-style="normal" font-weight="normal" text-anchor="start" fill="ee3b25" font-family="Gogono Cocoa Mochi" font-size="3000" text="3" type="text" id="svg_4">
         <path d="m7308.22719,2397.90878c100,33.33333 108.33333,158.33333 166.66667,241.66667c233.33333,50 316.66667,-216.66667 141.66667,-308.33333c-141.66667,-8.33333 -275,-41.66667 -391.66667,-83.33333c-50,-116.66667 -66.66667,-225 -41.66667,-325c116.66667,-50 241.66667,-83.33333 375,-91.66667c108.33333,-100 116.66667,-250 58.33333,-383.33333c-66.66667,-58.33333 -225,-41.66667 -191.66667,66.66667c100,308.33333 -458.33333,375 -566.66667,116.66667c-300,-700 825,-1008.33333 1233.33333,-475c108.33333,141.66667 183.33333,333.33333 150,583.33333c-16.66667,125 -133.33333,250 -316.66667,375c208.33333,83.33333 358.33333,241.66667 325,541.66667c-50,500 -875,625 -1266.66667,316.66667c-108.33333,-158.33333 -225,-341.66667 -133.33333,-541.66667c58.33333,-16.66667 208.33333,-33.33333 458.33333,-33.33333c0,0 0,0 0,0" stroke-width="0" fill="#ee3b25" id="svg_5"></path>
         <rect opacity="0" fill="#ee3b25" height="2253.91748" width="1446.53125" y="886.26029" x="6808.00671" id="svg_6"></rect>
      </g>
   </g>
</svg>

SVG limits for coordinates

You should also consider to round the coordinates number precision to avoid issues. Still OK in your example, but your drawing app or source seems to produce rather large numbers.
The Limits of Numbers in SVG

Edit: issue with image element:

Try to rewrite you image element like this:

  <image  width="100%" height="100%" preserveAspectRatio="none" id="svg_2" orighref="path/to/img" templatesrc="path/to/img" href="https://picsum.photos/200/300" origwidth="16626" origheight="5759" lock="true" />

<image> is no self contained – so there is no closing </image> tag.
I also replace the deprecated xlink:href with href

Upvotes: 1

Related Questions