CODEWITHSUNDEEP
websvg
sokid
sokid

Reputation: 813

SVG tool to draw and display in web

I am looking for a tool to draw the SVG diagram and I want to display the same in a webpage.

There are lot of tools to create SVG diagram, but I am looking for the one to add some extra fields to each shape.

OK first I will explain my requirement clear. When we create a rectangle using any SVG tool, it will create a SVG element with rect element, in my case I would like to differentiate two devices "device type-1" and "device type-2" (using CSS in my web application) but their shape is rectangle.

So, I have to add some additional information for each rectangle in the drawing tool, so that using Javascript I could understand the type of device, based on the device type I could apply different CSS for each rectangle.

How to do this? Any drawing tools support this kind of feature?

Upvotes: 0

Views: 727

Answers (2)

Matthias
Matthias

Reputation: 1436

You could use http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html and define IDs that you reference later on in JavaScript

Upvotes: 1

ezekielDFM
ezekielDFM

Reputation: 1977

One approach would be to us Adobe Illustrator to design you elements and Raphael JS to display and animate said elements. There are some differences in the way illustrator draws vector graphics and the way SVG does so the general consensus is to keep you graphics relatively simple. There are several guides out there, but this one looks particuallry good:

http://snugug.com/musings/illustrator-raphael-js-guide

Upvotes: 0

Related Questions