CODEWITHSUNDEEP
javascript
Starkers
Starkers

Reputation: 10531

Can I embed svgs in JavaScript?

I've created quite a specialised JavaScript application with my own vector graphics. I'd like to host my own hotlinkable API to complement this application, and thought it would be really tidy if I could embed the vector graphics straight into the API.

I know it can be done with fonts (remember cufon, pretty good before google turbo-charged their webfonts), and I don't need to support legacy versions of browsers, so what are your thoughts? How would you go about doing this?

Upvotes: 2

Views: 204

Answers (2)

PA.
PA.

Reputation: 29339

Yes, you can embed SVG into your HTML with the, now standard, <svg> tag.

Not only that, but you can also manipulate svg from javascript. I use jquery.svg library. It's easy, and fun, to use.

Try this...

<script type="text/javascript" src="jquery.svg.js"></script>
....

$(function() {
  var div=$("#sample");
  div.svg();
  var svg = div.svg('get');
  svg.load('chart.svg');
  setInterval(function () {
    draw(svg,div.width());
  }, 1000);
});

function draw(svg,w) {
  svg.circle(Math.random()*w, 
             Math.random()*w, 
             Math.random()*(w*.10)+10); 
}

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116100

Apparently you can embed svg images directly in HTML by adding an svg tag with the right content. So it should be reasonable possible to insert such an element from Javascript or JQuery as well using document.createElement.

[edit] When searching for an example, I found this other question that shows that a little more works needs to be done, because of the namespaces involved.

Upvotes: 1

Related Questions