Home/ Questions/Q 8626889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:08:22+00:00

I have a .svg file generated using Adobe Illustrator. These is the structure of

  • 0

I have a .svg file generated using Adobe Illustrator. These is the structure of the SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="1068px" height="1671.49px" viewBox="0 0 1068 1671.49" enable-background="new 0 0 1068 1671.49" xml:space="preserve">
<g>
    <polygon fill="#C6C6C6" points="451.07,1979.34 451.07,1979.34 450.8,1979.17 448.72,1978.82 448.6,1978.71 448.34,1978.59 
        447.71,1978.36 448.01,1978.33 450.2,1978.3 452.53,1978.76 451.35,1979.08 451.73,1979.29     "/>
<!-- more polygon shapes -->
</g>
</svg>

Then I include it using the <embed> tag like this in my .html file. Structure of the HTML file:

<!DOCTYPE html>
<html>
    <head>
        <title>My Demo</title>
        <link rel="stylesheet" href="css/style.css" />

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/raphael-min.js"></script>
        <script src="js/script.js"></script>

    </head>
    <body>
        <div id="shape1"></div>
        <div id="shape2"></div>        
        <div id="shape3"></div>
        <div id="embed_svg">
            <embed src="my_svg_file.svg" type="image/svg+xml" />
        </div>
    </body>    
</html>

Notes:

  • I don’t think that is browser support related since I’ve drawn 3 HTML5 shapes using the raphael.js HTML5 library and they work perfectly. (tried on chrome and firefox)
  • Including the file doesn’t work as it should. The browser seems to parse it but it just doesn’t seem to display it.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The co-ordinates in your shapes are very similar so the polygon covers a very very tiny part of the viewBox area.

    If you change the viewBox of the <svg> element to viewBox=”448 1977 5 10″ the shape will be displayed as the visible region now more closely matches the polygon co-ordinates, alternatively make the polygon bigger.

    • 0