1

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.

2
  • I can't replicate your issue. The above code as-is shows your picture for me in IE, FF, and Chrome. What browser are you using? Also, it might be that you just missed the first few lines when copy/pasting, but the above code is not well-formed (missing doctype, <html>, and opening <head> tags) Dec 10 '15 at 13:13
  • I'd suspect that there is a problem in your style.css, transit.js, or scripts.js that is causing this issue, since I see your picture just fine. Try viewing the page without those lines commented out and see if you can isolate a problem. Dec 10 '15 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.