Modify a svg file using jQuery

40,438

Solution 1

Done!

Finally I found documentation on jQuery.svg. and on svg itself.

Let's start with the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script> 
</head>
<body>

<script type="text/javascript">

$(document).ready(function() 
    {
    $("#svgload").svg({
        onLoad: function()
            {
            var svg = $("#svgload").svg('get');
            svg.load('Red1.svg', {addTo: true,  changeSize: false});        
            },
        settings: {}}
        );  


    $('#btnTest').click(function(e)
        {
        var rect = $('#idRect1');
        rect.css('fill','green');
        //rect.attrib('fill','green');

        var txt = $('#idText1');
        txt.text('FF');
     });    

    });
</Script>   

<div id="svgload" style="width: 100%; height: 300px;"></div>

<div id="btnTest">
Click Me!
</div>

</body>
</html>

And this sample Red1.svg file:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

<rect id="idRect1" fill="#FF0000" width="300" height="300"/> 
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>

</svg>

Using jQuery, I loaded the external Red1.svg at runtime. With a click on btnTest I set the text and the fill color.

In my research I have found that:

With jQuery.svg I can access the elements in the SVG file and standard html tag
SVG lets you choose the way you want to set the fill color

2a. with a style
```
    rect.css('fill','green');
```
2b. with a specific tag
```
    rect.attr('fill','green');
```

So your code must change depending on the program that generated the svg.

Have a nice day.

Solution 2

Well, there's a FANTASTIC library that you can use with jQuery or any other javascript:

Raphael JS: http://raphaeljs.com/

Check out the samples, you can do just about anything.

Solution 3

I use svgweb to display and programmatically manipulate SVGs using JavaScript. I use it because it ports SVG to IE6+ using Flash, and because it provides some neat SVG loading features.

Since I like using jQuery so much, I patched it to work with svgweb. I used Keith Woods script as an example. Keith's code doesn't support the latest version of jQuery.

Here is the patch: jquery.svgweb-and-svgdom-patch I've been meaning to give it a proper home in the svgweb contrib, but haven't gotten around to it. It's based on Keith's patch, but has some updates. One thing to know, is that for IE, you'll need to put the following code in a script before jQuery loads:

document.querySelectorAll = null;

It's not enough to do this after jQuery loads anymore, so you'd have to use server-side browser detection to inject it, or client-side browser detection in a script before jQuery.

After all that... You can do stuff like:

$('#mycirc').attr('fill', 'Red');

40,438

Redax

I am Italian. I am an engeneer. I write software for job and for fun.

Updated on July 09, 2022

Comments

Redax almost 2 years
I have a svg file with some shape and some text. I'd like to modify the svg at runtime, so that some shape can change color, and some text can change its content.

Let's suppose that I have only two elements in an external svg file:
1. circle1: a blue filled circle witdh that id
2. text1: a text containing "--" with that id
Now I can view the file in my html with
```
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
```
From a button near the image, using jQuery, I can catch the onClick event: I'd like to fill the cicle with red and change the text to "hello word".

How can I do that? Is there a jQuery based solution?

I have found the jquery.svg plugin, but it seem that you can only modify a runtime created document.

Thanks.
STW about 13 years

hadn't heard of that before, but that looks pretty amazing
peteorpeter about 13 years

Raphael is great, but doesn't manipulate external SVG files. @Redax may not actually need the file to be external, in which case Raphael is perfect for a simpler example like this.
Milimetric about 13 years

True, but you can use the code in raphael.js to get an idea of how to play with SVG files.
Redax about 13 years

The documentation of Raphael is very poor. You can create beautifull lines and circles and... tigers. But nothing related to waht I need.
Milimetric about 13 years

Agreed, documentation is poor. You can definitely fill in a circle and change text with it though. IF you google around, you'll find discussions on groups about using it.
Redax about 13 years

A good site,but is not what I need: it's easy to create lines and text and random bubbles. I can not take an existing document ad make a text change.
aljabear almost 12 years

Thanks. This helped me a lot.
aljabear almost 12 years

SVG code which worked for me: <svg version="1.1" xmlns="w3.org/2000/svg"><rect id="idRect1" fill="#FF0000" width="300" height="300"/> </svg>
Milimetric over 11 years

It's getting better but now there are alternatives like d3 which are amazingly documented: github.com/mbostock/d3/wiki