SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem importing SVG file

    Hi,

    I want to import an SVG file to use on my web site but nothing is displayed. I'm testing this using VS2010 and have tried viewing in all major browsers with the same effect. Can anyone offer some advice into what I should be checking?

    Many Thanks

    Html file
    Code HTML4Strict:
    <!doctype html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <!-- does not display -->
    <embed src="img/SVG/green-circle.svg" width="500" height="320" type="image/svg+xml" />
    <img src="img/SVG/green-circle.svg" height="64" width="64" alt="green circle" />
    <object type="image/svg+xml" data="img/SVG/green-circle.svg" style="float:left;margin-right:1cm;" width="64" height="40" border="1"></object>
    <!-- correctly displayed -->
    <svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
    </svg>
    </body>
    </html>

    green_circle.svg
    Code XML:
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
    </svg>

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,833
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    This worked just fine for me:

    Code:
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
        <title>Test embedding SVG</title>
    </head>
    <body>
    
    <embed src="green-circle.svg" width="64" height="64" type="image/svg+xml" >
    <img src="green-circle.svg" height="64" width="64" alt="green circle" >
    <object type="image/svg+xml" data="green-circle.svg" width="64" height="64"></object>
    
    </body>
    </html>
    In separate file I saved in the same folder:

    Code:
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg id="circle" height="64" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="32" cy="32" r="30" fill="green" />
    </svg>
    You should be checking your file paths. Also, you don't need the self-closing syntax /> for void elements in HTML5 although I guess it can be used without throwing validation errors.

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like a problem with VS2010. I can load the svg fine pointing at the html file directly through a browser. Maybe VS2010 is not understanding the mime type, but I do not know how to check.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •