Attention: Breaking News:
There has recently been an important change to SVG enabled builds. SVG enabled builds now require you to set the 'svg.enabled' pref to 'true' before they will render SVG.
As this site is for Mozilla, then you should really consider downloading an SVG enabled Browser. This will lead you to the Mozilla SVG project page where one can get the latest trunk build.
For the moment I'm very busy with editing vacation videos, perhaps I'll get up something that is view able, but until then you can head over to Alex's examples that he has worked up from the suite of tests that are a clone of the W3C's conformance suite which has been XSLT-transformed into a format that Mozilla can digest. Link
I've just found out that the, well some anyway, Mozillas are now doing gradients and so I've put up a changed Landscape. Maybe I'll put up some more and mark them better. Okay, look to your left, there is now a menu point called Gradients.
As promised earlier, much earlier, here is an example (Link) of text for the GDI Browser and of course of browsers that use a plug in. Sorry to those folks visiting with a libart.dll browser in that there is no page for you. The libart enabled Mozilla browsers do not render SVG text.
Here are some of the new SVG objects that are now able to be written inline also some controls.If the ball gets in the way, just grab it with your mouse and drag it away.
What is SVG? SVG stands for Scalable Vector Graphics, and is sort of the HTML of graphics: It has a similar understandable syntax (XML), there are tools to create it without coding, can be generated on and communicate with a server, can be used for animations, or made interactive with JavaScript can be used in a webbrowser, but is not limited to it, has limited versions for mobile phones and such can be easily combined with other (web)technologies
Alex is also the new editor of the SVG Project page at Mozilla. Plus he still has some great examples over at his SVG page at http://www.croczilla.com.
What is working so far?
-
- The following tags are at least somewhat supported:
- <svg>: only a subset of the SVGSVGElement interface is implemented
- <g>
- <polyline>: filled polylines don't work
- <polygon>
- <circle>
- <path>: The quadratic path commands aren't implemented yet (q,Q,t,T). All other commands are working (m, M, z, Z, l, L, C, c, s, S, h, H, v, V, a, A)
- <foreignObject>: Doesn't work on linux. Rotation doesn't work.
- <line>
- <rect>
- <ellipse>
- All elements should support the transform-attribute and the associated DOM interfaces. The transform-attribute currently parses only rotate, scale and translate transformations.
- The only CSS properties implemented so far are:
- fill
- fill-opacity
- fill-rule
- stroke
- stroke-dasharray: currently the dasharray has to be enclosed in single quotes. This will be fixed in future.
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- SVG should work fine in compound documents. I.e. you can place SVG content into a XUL or HTML document, as long as it is wrapped up in an enclosing <svg>-</svg> pair and the namespace ('http://www.w3.org/2000/svg') is properly specified.
- SVG should work fine in XBL. See the samples for details.
- The following tags are at least somewhat supported:
One of the things that makes this so great is that when working in WebDraw from Jasc, one can copy direct from the source editor and paste into an XML document. Also one can use the CR2V tool from Celinea. this is a DOS command tool that can convert JPG, PNG, GIF and BMP files into SVG and the luck here is that all SVG files are in Paths!
Also what so exciting is now one can style direct in the image using css inline, embedded style sheets in the <head> of an XHTML document or a linked style sheet. The standard styling of fill, stroke and opacity are now possible, plus this can be addressed over the DOM with javascript. A milestone, grab yourself a copy and get involved.
As stated above these pages are to test and work on examples of inline SVG images which are in XML script. In order to view the pages with SVG, you will want to get the right browser.
As mentioned above, there was a page here that had SVG inline script and SVG plug in. It was the New Mozilly page, however due to the change in Mozilla the embedded SVG has been removed.
Plug in Information: caution-see above.
To see both styles side by side you will need to install the Adobe SVG Viewer. So in order to see everything you might think about doing the following after installing the Viewer from Adobe(see links below).
- NPSVG3.dll
- NPSVG3.zip
They are installed with the Adobe SVG Viewer. This is now at a number three version.
As one last note, if you are visiting these pages with IE this start page will look a little funny to you. In Mozilla, all of these boxes with borders are rounded at the corners and the color fuchse or #ff00ff looks a lot different, also IE 5X doesn't support margin-left:auto; or margin-right:auto; in CSS styling, thus everything is drifted left.
For you Netscapers with 4X, and I was one myself. Sorry; but as this site is for Mozilla and the fact that NS 4X has very low CSS support, plus it doesn't render iframes which is just one of the structures being used here. I will not be spending much time on formatting the HTML for you.
Links
Just enter SVG in the search box and see what you come up with. Enjoy