Federico Innocenti Federico Innocenti - 2 months ago 13
HTML Question

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?

myf myf
Answer

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>
Comments