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?
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
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
I'm new to TypeScript and JavaScript, although not completely new to programming. I wondered if someone could help me with a short piece of TypeScript code showing how you would use TypeScripts SVG library to draw. So, for example, should I use SVGRectangle or SVGRectangleElement and how do I use them?
The only example I can find on the TypeScript site uses D3 but I would like to use the built in SVG library.
Just to clarify, TypeScript doesn't have an SVG library - but you can use native JavaScript SVG or one of the SVG libraries in your TypeScript code.
This opens up the samples and tutorials you will find, as you can search for "JavaScript SVG" rather than "TypeScript" SVG.
I recommend the MDN SVG Reference as a starting point.
You can use TypeScript definition files of existing JavaScript SVG libraries, like Raphael or svgjs.
This site http://accessiblemath.dessci.com/2010/09/mathplayer-mathjax-more-accessible-math.html is telling me it's possible to combine Mathjax with Mathplayer to make mathematics display faster.
A great feature of MathJax is that it can turn the display of math
over to a native MathML renderer such as MathPlayer. This results in
much faster display of the math.
Is this a good idea and if so, how should one go about doing this?
You don't have to do anything. MathJax will recognize the presence of MathPlayer automatically and hand over rendering of any MathML. (MathJax will still convert TeX or AsciiMath to MathML first.)
I am working on an application where I need to display color coded indicators. The standard colors will be red/amber/green, but I need to be able to pick any color (e.g. by hex value). The colors are updated dynamically by a script, based on data (dashboard style).
Are there libraries that could help me? I am thinking in particular about using svg or canvas graphics that the script could modify.
Note: the question has been rephrased to better explain the context.
I like this collection on WikiCommons. They are in SVG
http://commons.wikimedia.org/wiki/Tango_icons
Here are a couple of links to start with:
nounproject
openiconlibrary
openclipart
small iconset for use with raphaël
I'm looking to do a portfolio site, and I wanted to do some creative drawing on the website without using images.
I considered canvas, which I really think would be cool, plus an interesting project, however, I heard that IE has no compatibility (is that true?) so I cannot have that.
Then, I considered Raphaël, which seems like it's the most viable option thus far.
Ughh, there was another library that I can't remember the name to, which also seemed like a good option.
What do you guys think about Raphaël and its overall compatibility, and its capabilities, regarding the kinds of drawing its capable of. I was browsing through the documentation and I think it's quite powerful.
Do you want to draw the vector graphics on the site itself, or just publish premade vector graphics?
If the former, have a look at svg-edit which can easily be embedded in your site, and which works in most browsers (old IE versions require the chrome frame plugin, but IE9 will be supported by svg-edit 2.6).
If the latter then there are probably many options, here are a couple off the top of my head:
Use SVGWeb - get started quickly with that using templates from svgboilerplate.com
Serve svg to browsers that support it, and static images to everyone else
<object data="your.svg" type="image/svg+xml"><img src="staticyoursvg.png"></object>
Well you could download Inkscape and draw what you want cross-browser in there.
Then go to my website (Page with tool and instructions below) and use the SVGTOHTML converter there.
I'm adding more with each release.
The SVG is conveted into Raphael and there are a couple of options as to what format you can have.
The version is at 0.57 at the point of typing this.
http://www.irunmywebsite.com/raphael/svgsource.php
It isn’t true that IE doesn’t support canvas. IE9 will support it, which is the same version that will support SVG.
For SVG development, it depends what you want to do. For static images you can even use Illustrator or Inkscape then save/export as SVG. If you do this, remember to use Scour [0], as the auto-generated markup can be a bit crufty. I usually just write the SVG by hand, unless I'm doing something complex, in which case it is better to use a image editor.
There are no real good editors to add animations though, so I always add those by hand. Things like SMIL (used for animating SVG) are not that difficult to learn, but a bit verbose. If you use SMIL then it is recommended to use FakeSMIL, which is included in the SVGBoilerplate that Erik links to above, as some browsers have lacking support for SMIL.
If you want to use a JS library to generate the SVG rather than writing by hand or using an editor, then Raphaël is probably the most mature. There is also Dojo GFX [1]. Which is best really depends on personal preference and what you are trying to do. It would be best to try them out with something simple and see which you prefer.
[0] http://www.codedread.com/scour/
[1] http://docs.dojocampus.org/dojox/gfx
Look into SVG Web, it uses Flash to emulate SVG in non-supporting browsers. It's written by industry leaders like Brad Neuberg and it doesn't interfere with the way you want to write SVG markup so when the browsers that don't support SVG disappear you can ditch it and your SVG markup will still work. With Raphaël, you have to to write JavaScript code instead of SVG markup, so you have to keep using it forever, or re-code your graphics. Also, Raphaël only supports the lowest common denominator between SVG and VML, so you can't do much. It even emulates some VML bugs in SVG, so that both graphics look the same. Raphaël is better for dynamically generated SVG, but for other cases, I'd recommend SVG Web.