JavaScript and SVG

Discussion in 'Game Development (Technical)' started by Richard Nunes, Jul 22, 2011.

  1. Richard Nunes

    Richard Nunes New Member

    Joined:
    Nov 10, 2008
    Messages:
    202
    Likes Received:
    2
    I have been digging into information about developing games using JavaScript for logic and using SVG for graphics. I have come across many sites that show how to include SVG but no good sources on using JavaScript to manipulate the SVG document. I've tried a few things and I can't seem to access the elements in the SVG document using the either DOM or XPath. There seems to be disagreement about the level of support on different browsers and whether I should use iframe, object or embed tags.

    Has anyone tried this? What has your experience been? Is it just easier to use Flash?
     
  2. infocyde

    infocyde New Member

    Joined:
    Mar 25, 2009
    Messages:
    27
    Likes Received:
    0
    Re

    This is a non-answer to your question, but just curious...

    Have you checked out the HTML 5 Canvas element (assuming you have). Any reason why you have decided to go the SVG route?

    I'm a noob at both. Seems like much more and less cryptic info exists for the Canvas tag. The following might be helpful but I'm sure you've already stumbled upon similar http://www.adobe.com/svg/basics/intro.html
     
  3. richtaur

    Indie Author

    Joined:
    Apr 19, 2009
    Messages:
    262
    Likes Received:
    0
    The most notable JavaScript SVG library is probably Raphael. I don't have much experience with SVG but the only games I make these days are JavaScript and Canvas/DOM. Canvas is awesome!
     
  4. Richard Nunes

    Richard Nunes New Member

    Joined:
    Nov 10, 2008
    Messages:
    202
    Likes Received:
    2
    I did look at Canvas but there are a few things that I like about SVG: it's XML so I can use a generator (written in C) to build maps or write them by hand, I can edit SVG in Illustrator, it's supported by older browsers (the only real knock against Canvas), it's very easy to mix SVG with HTML.

    I'm working on an abstract strategy game using simple maps that I can draw in SVG and remain fairly static. I can edit an SVG document based on user input and it stays static for the next ten minutes. I don't need the rendering capability of Canvas.
     
  5. oNyx

    Original Member

    Joined:
    Jul 26, 2004
    Messages:
    1,212
    Likes Received:
    0
    >[SVG is] supported by older browsers

    Compared to Canvas you maaaaaybe increase compatibility by 1%. If you're talking about VML emulation... well, you can also emulate Canvas via VML and Flash is also an option.

    As much as I like SVG, it isn't well-suited for games. The turn-over rate is kinda low, the workflow is kinda awkward, and it also isn't nearly as straightforward as Canvas. I really can't recommend it.
     
  6. Richard Nunes

    Richard Nunes New Member

    Joined:
    Nov 10, 2008
    Messages:
    202
    Likes Received:
    2
    I am going with Canvas. I have been tinkering with Raphael and it is awesome.

    I have bridged the gap by loading SVG documents as vanilla XML and generating Raphael calls for each element. I can keep all of the SVG documents I've already defined, tweak them in Illustrator and use a loop for the heavy lifting of creating each shape on the canvas.
     
  7. Simon Tomlin

    Simon Tomlin New Member

    Joined:
    Aug 3, 2011
    Messages:
    48
    Likes Received:
    0
    Hi, I'm developing a wargame which uses SVG for maps and the animated battles.
    You can change just about anything via Javascript and the SVG elements.
    This is the one which got me up and running the whole site is useful for SVG as well
    http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/

    As for the level of support, I have found it to be fine with the latest versions Chrome, IE9, Opera but rather annoyingly I have had problems useing the <use> tag with firefox and also <path>. So just follow SVG 1.1 spec.

    Until the browsers start to implement the HTML5 spec for inline SVG I have been using the object tag which works well.

    Basically I tend to wrap the SVG document within an outlaying HTML doc and you can go back and forth between the two.

    I use HTML for any keyboard input but the SVG works great for touch screen inputs or one mouse click.

    SVG works well with CSS as well so that gets used alot and is also accessible via JS but you cannot alter a style if its been overwritten by a class. However you can change the complete class which is what I do.

    This for example zooms in to an area of a SVG canvas, the coo varible is just the viewbox setting as in "200 200 600 400"

    function zoomToCap(coo){
    mySVG = document.getElementById("mainSVG");
    mySVG.setAttribute("viewBox",coo);
    }

    Once you getting it working once its very easy its just the first time can be a bit frustrating

    Hope this helps and good luck with your project
     
  8. Richard Nunes

    Richard Nunes New Member

    Joined:
    Nov 10, 2008
    Messages:
    202
    Likes Received:
    2
    Thanks Simon. That was the tutorial I spent hours looking for but never found.

    I've been tinkering with Raphael for a few weeks now. The initial frustration with embedded SVG soured my opinion. In contrast, I had a Raphael paper up and running within five minutes and a functional demo within a few hours. Once I found a few examples, I really took to it. It also has some excellent animation functions that I would rather not code myself.
     
  9. Simon Tomlin

    Simon Tomlin New Member

    Joined:
    Aug 3, 2011
    Messages:
    48
    Likes Received:
    0
    Hi Richard,
    I guess we are properly doing slightly different things. I do not have to interact very much with the SVG once it is draw, only for selection purposes and that is done with a simple <a></a> wrapped around the grouped elements.

    My application is very dynamic though in the sense it changes (a game turn progresses) every 8 mins which usually changes the map. So its a case of all my logic is on the server in php / SQL so the client is mainly for display and issueing some commands.

    It is supposed to be a test bed for HTML5 and seeing what I can get to work across as many platforms as possible.

    It does seem that most people are more interested in the canvas element though.

    I find it gets a bit lonely in the SVG world but it is better now than say a year ago.

    Lets us know how your project goes.

    Simon
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer