Access SVG elements via Javascript in Firefox

SimonT · Sep 2011

Hi Guys,

maybe someone of you has some idea how to do this.

I want to insert an SVG image via <img src...> into an HTML website and then grab all elements of it in Firefox. I can't information about that. Mostly the examples are using SVGs created during runtime

equil · Sep 2011

this is such a wierd place for a question like this.

<object data="FILENAME.svg"  type="image/svg+xml"></object>

edit: whoops sorry didn't read the entire question somehow.
Look into the contentDocument command

SimonT · Sep 2011

Why? It's technical and i need it for a 2D game

Thanks for the answer and how to i get access to the elements? Are there any functions like:

elements = []
element = object.getElements();

or something?

Ben Apuna · Sep 2011

What exactly are you trying to do?

SVG is a form of XML, you can open them up in notepad to get at the individual data elements.

Maybe this link will help you with putting a SVG in your HTML.

Looks like the <embed> tag works fine for a .SVG file.

You can also open up the SVG in notepad and copy everything below the <?xml... tag and paste it directly into your HTML anywhere in between the <body> tags and it'll show up on the page as well. So copy/paste everything from the <svg... blah blah start tag to the </svg> end tag.

EDIT:

Oh beat to it, well maybe something like this:

http://svgkit.sourceforge.net/

or this:

http://raphaeljs.com/

might help.

EDIT2:

or this:

http://code.google.com/p/svgweb/

or this:

http://processingjs.org/ EDIT3: - this looks promising.

SimonT · Sep 2011

I have a small HTML5 2D Game and thought about the level editor. The easiest way to do would be: use Inkscape to design the level (place some squares and circles and give them IDs like "enemy", "player" etc). The i would load up the image widht size 0,0 or 1,1 into the website were the game lies and extract the level data from the picture.

That would give me a "level editor" without a lot work and i would have just to save the picture out of Inkscape to tweak the level. Sure i could paste the "source" of the SVG into the HTML but i would like to make it "right" and "clean".

Ben Apuna · Sep 2011

I think you're on the right track but it would probably be easier to then just parse the XML of the SVG level and extract the appropriate data.

http://jumpnslide.tumblr.com/post/2557920924/how-to-use-inkscape-as-a-game-development-tool

http://duriansoftware.com/joe/Using-Inkscape-as-a-map-editor.html

SimonT · Sep 2011

THX for the links the seem very useful. I hope the solves the problem. Because you can't open textfiles from your local HDD for security reasons. Also to open SVG "Source" is not allowed. I'll check the links out later!

Ben Apuna · Sep 2011

Yeah you wouldn't want to do the conversion in game. You should just be using Inkscape/SVG as a level editing tool.

Once the level is done you convert it to something easier to use by your game like a JSON file or something.

SimonT · Sep 2011

I read the websites and both converting the level befor using it. Even if i would convert it to an XML textfile i have no idea how i can load into it my game-html5-file

Ben Apuna · Sep 2011

Looks like there's something called "local storage" for that.

http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

http://24ways.org/2010/html5-local-storage

EDIT:

or maybe just access from the server/webhost it like everything else, images etc...?

or like this:

http://falcon80.com/JSON/AccessingFromJS.html

SimonT · Sep 2011

thx. checked it out and this is nice to store information generated by the script to the local harddrive but you cant simply read a file from it

Ben Apuna · Sep 2011

I think you could just paste the JSON directly into your HTML like that last example.

Either way I think you're pretty brave to make a game in HTML5.

If it were me, I'd be sticking to Flash for now. Admittedly I've been looking at JavaScript and HTML5 stuff for the past week or so... new tech is so shiny and attractive :poly136:

Good luck!

SimonT · Sep 2011

It's more a prototype

I don't think that i can handle a whole game alone. When i see that the gameplay is cool and a coder wants to make it "right" then maybe. But until this happens i play around with gameplay some circles and boxes as elements

Ben Apuna · Sep 2011

One more link before I go to sleep:

http://www.json.org/js.html

SimonT · Sep 2011

Nothing is working. I read alot stuff and got more near to the destination via AJAX. Firefox seems to allow easy access to SVG which was created during runtime but NOT when they are just loaded via <object> tag. Via Ajax and jQuery i load it now after the site was loaded and trought that i got access but NOT via the easy functions .getElementByID() - instead i have access every childNode by it's index and at the and i didn't got the result i liked. Didn't got access to the properties of the objects.

I'll post my progress. If i can't find something it seems i have to use Internet Explorer, wait for the next Firefox, paste the SVG Code directly into my JS code or place the game-elements by hand. :,(

Ben Apuna · Sep 2011

That's why I mentioned converting from SVG format to JSON data. Then you can just paste the resulting JSON code directly into your JavaScript and access it's data with your game's code (because it will then be a part of your game's code).

Unless you want to use the SVG as art all you seem to need to get from it are object IDs, positions, and orientations, right? Then you use that data in your game's logic like in spawnEnemies() and loadLevel() methods for example, to place the proper game objects like enemies, and level sprites.

I must be missing some key point here since I don't know JavaScript. Sorry about that by the way, I'm probably giving bad advice...

SimonT · Sep 2011

Thx for the response

The key point would be, to NOT have to paste the data again into the JS script when the levels changed. It would be way more intuitive to just open Inkscape, tweak some Elements and hit save. I'll see maybe a friend of mine will find out something.

Ben Apuna · Sep 2011

Ah, that's absolutely right! I hadn't thought about that. Just shows my inexperience in the matter :poly136:

I think you could frankenstein a script together that could write your final JavaScript for you given both the input of your level JSON and your game code. That way you wouldn't have to copy/paste manually during design iteration.

Access SVG elements via Javascript in Firefox

Replies