Home/ Questions/Q 4019582
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:07:20+00:00

I am trying to display an .svg file in a HTML page using jQuery

  • 0

I am trying to display an .svg file in a HTML page using jQuery SVG (http://keith-wood.name/svg.html). It should be pretty simple but I can not get it to work.

The only output I get is a big box (which is my div styled by CSS) and the words, “Error loading:” in the box. I’ve tried it in Chrome and Firefox. In Chrome I had to run it as “chromium-browser –disable-web-security”.

Here’s the code:

<html>
<head>

    <style type="text/css">
        #canvas { width: 100%; height: 100%; border: 1px solid #484; }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.svg.min.js"></script>
    <script type="text/javascript" src="jquery.svgdom.min.js"></script>
    <script type="text/javascript" src="jquery.svganim.min.js"></script>
    <script type="text/javascript">

        $(document).ready ( function () {
            $('#canvas').svg({loadURL: 'lion.svg'});
        });

    </script>
</head>
<body>
    <div id='console'></div>
    <div id='canvas'></div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One thing to note is that the url is loaded using a jquery.ajax call. So I don’t think it will work if the lion.svg is local. For me it works if I do:

    <html>
<head>

    <style type="text/css">
        #canvas { width: 100%; height: 100%; border: 1px solid #484; }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script>
    <script type="text/javascript">

        $(document).ready ( function () {
            $('#canvas').svg({loadURL: 'http://keith-wood.name/lion.svg'});
        });

    </script>
</head>
<body>
    <div id='console'></div>
    <div id='canvas'></div>
</body>
    • 0