CODEWITHSUNDEEP
htmlsvg
Federico Innocenti
Federico Innocenti

Reputation: 3

SVG image embedded in web page doesn't show

I'm trying to embed a set of SVG images in a blank web page.

<html><head></head>
<body>
<img  width="117px" src="img/icone/phone_hex034F84.svg" alt="image">
<img  width="320px" src="img/illustrazioni/SHIPPER3.svg" alt="image">
</body>
</html>

Both files are self-contained svg generated by Illustrator.

While the first does render in the browser the second (SHIPPER3.svg) doesn't.

See the code: http://104.155.112.173/land/img/illustrazioni/SHIPPER3.svg

You can download the full source from the previous link as I cannot embed it in the question (too large). Although, I'll embed here just the preamble.

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="_x5B_SHIPPER1_x5D_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 733.3 587.8" style="enable-background:new 0 0 733.3 587.8;" xml:space="preserve">
<style type="text/css">
    .st0{clip-path:url(#SVGID_2_);}
    .st1{fill:#EDEDED;}
    .st2{fill:#F2F2F2;}

If I copy and paste SHIPPER3.svg in http://www.freecodeformat.com/svg-editor.php it does render. I can also open it in Sketch with no problems.

I tried to embed SHIPPER3.svg also as inline svg but same, again, no show.

What I am missing?

Upvotes: 0

Views: 939

Answers (2)

enhzflep
enhzflep

Reputation: 13089

Further to a comment I left above, you may wish to replace the <clippath id='SVGID_2_' element with the following:

<clipPath xmlns="http://www.w3.org/2000/svg" id="SVGID_2_">
    <ellipse xmlns="http://www.w3.org/2000/svg" id="SVGID_1_" cx="360" cy="290" rx="325" ry="260"/>
</clipPath>

This does 2 things. (0) it removes the link to the SVGID_1_ element by inserting the data that was inside it directly. (1) repositions and sizes the ellipse

enter image description here

Upvotes: 0

myf
myf

Reputation: 11273

Several problems in your SHIPPER3.svg:

  • all your top-level groups has class st0 which is said to be clipped out by clipPath that is outside entire viewBox
  • clipPath #SVGID_2_ has style="display:none;" what also hides it

See:

<svg version="1.1" viewBox="0 0 733.3 587.8">
<style type="text/css">
    .st0{clip-path:url(#SVGID_2_);}
    /* ... */
</style>
<defs>
    <ellipse id="SVGID_1_" cx="1085.6" cy="279.3" rx="251.8" ry="233.4"/>
</defs>
<clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_"  style="display:none;overflow:visible;"/>
</clipPath>
<g class="st0">
 <!-- ... -->
</g>
</svg>

Upvotes: 1

Related Questions