Federico Innocenti Federico Innocenti - 1 year ago 56
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.

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

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:

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

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 Source

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


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