Mobile app version of vmapp.org
Login or Join
Gonzalez368

: SVG showing as blank in html I have the following SVG file , saved as XML , looks as follows: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export

@Gonzalez368

Posted in: #Css #Html #Svg

I have the following SVG file , saved as XML , looks as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E0E01F;}
.st1{fill:#603716;}
</style>
<polygon id="XMLID_1_" class="st0" points="340.1,-508 340.1,-253.9 626,-423.4 483,-508 "/>
<polygon id="XMLID_3_" class="st1" points="340.1,-253.9 50,-91.9 340.1,77.6 "/>
</svg>


Now if i ipen the above svg code in illustrator , it opens just fine , but if i try opening it in my html like so:










<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="style.css">

<style type="text/css">
.st0{fill:#FF931E;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#7AC943;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#FF1D25;stroke:#000000;stroke-miterlimit:10;}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">

<polygon id="XMLID_1_" class="st0" points="78,149 107.4,133.5 101.8,166.3 125.6,189.5 92.7,194.2 78,224 63.3,194.2 30.4,189.5
54.2,166.3 48.6,133.5 "/>
<polygon id="XMLID_2_" class="st1" points="239,269 268.4,253.5 262.8,286.3 286.6,309.5 253.7,314.2 239,344 224.3,314.2
191.4,309.5 215.2,286.3 209.6,253.5 "/>
<polygon id="XMLID_3_" class="st2" points="441,217 470.4,201.5 464.8,234.3 488.6,257.5 455.7,262.2 441,292 426.3,262.2
393.4,257.5 417.2,234.3 411.6,201.5 "/>
<polygon id="XMLID_4_" class="st0" points="433,381 462.4,365.5 456.8,398.3 480.6,421.5 447.7,426.2 433,456 418.3,426.2
385.4,421.5 409.2,398.3 403.6,365.5 "/>

</svg>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="transit.js"></script>
<script src="scripts.js"></script>
</body>




I see a blank document, WHY ? can anybody explain ?

Thank you.

10% popularity Vote Up Vote Down


Login to follow query

More posts by @Gonzalez368

0 Comments

Sorted by latest first Latest Oldest Best

Back to top | Use Dark Theme