With increasing support for <canvas> and SVG across browsers, many people have been creating vector images in the SVG format. The SVG extension makes it possible to use these images in your Fireworks documents by parsing the XML and recreating the vectors using Fireworks elements.

Opening an SVG file

To open an SVG file, select the Commands > SVG > Open command. A file dialog will open to let you select a .svg file. When you click OK, a new Fireworks document will be created and the contents of the SVG file will be inserted. The new document will be resized to try to match the viewport of the source file.

Elements that are grouped in the SVG file will also be grouped in the Fireworks output. Groups and elements will inherit their names from the IDs or class names of the corresponding tags in the SVG file.

Inserting an SVG file

To insert an SVG file into the current document, select Commands > SVG > Insert. After selecting a file in the dialog, the SVG content will be rendered in the middle of the current document.

Limitations

SVG is an extremely complicated format, and many tools export it in slightly different ways, so what you see in Fireworks after importing a file may look quite different than what you see in the browser. The visual fidelity will often depend on how many of SVG's features the file uses. As long as the shapes are limited to paths, even large files with lots of complex curves should usually look pretty similar, while hand-coded SVG that uses various shortcuts and obscure features will often look very different.

Note that importing SVG pushes the JavaScript engine in Fireworks very hard, and may sometimes leave the app in an unstable state. Be sure to save all your work before importing SVG files. Also, a large SVG file may take 5 - 15 seconds to parse and render. While the command is processing the file, the Fireworks UI will be unresponsive.

When you run into problems importing an SVG file, please add a comment below with a link to the file.

Partially supported features

• Linked PNG or JPEG images will be imported if they are available at a relative path from the location of the SVG file. Embedded Base64 images or images at absolute URLs are not supported.
• Fireworks CS6 is required, as SVG supports separate opacities for fill and stroke.
• Fireworks requires that strokes be at least 1px in diameter, so if an SVG file specifies a sub-pixel stroke width, the stroke will be given a lower opacity to simulate a thinner stroke.
• Basic blur and drop-shadow effects generally work, but other filters are not supported.
• Text elements will tend to shift, and may be a slightly different size.
• Some radial gradients may not look correct.
• Lines with more than 3 dashes are not supported.
• Embedded CSS styles are supported, but must be defined before the elements that use them are defined.

Unsupported features

• Fireworks doesn't support gradients on strokes, so the stroke color will default to the color of the first stop in the gradient, with an opacity calculated as the average opacities of the first and last nodes. This may substantially change the look of the image.
• Fireworks doesn't support mitered corners or flat ends on strokes, so the outlines of shapes may look different than what a browser shows, since a round brush is used for strokes.
• Styling of individual words within a text block will be lost.
• Opening an SVG file may not always produce a correctly sized document.
• External style sheets.
• Custom SVG entities.
• Multiple SVG elements per file.
• Masks.
• Asymmetrically rounded rectangle corners.
• Clipped symbols.
• Text on a path.
• Per-character text rotations or offsets.
• Cursors, glyphs and markers.

Acknowledgements

This extension leverages a number of open source JavaScript libraries:

• SAX parser is used to parse the SVG file's XML.
• JSCSSP is used to parse CSS styles embedded in the SVG.
• PEG.js is used to build a parser for the complicated path data point syntax.
• This PEG.js grammar, while buggy, provided a starting point for the path data parser.
• A function from Raphael.js is used to render arcs in path shapes.
• glMatrix is used to transform the fill handles of gradients.
• Underscore.js provides ES5-equivalent array functions.
• FWRequireJS, which enables RequireJS to run inside Fireworks, is used to separate the 500KB of JavaScript code into more manageable modules.
• While this extension doesn't let you export SVG, Aaron Beall's excellent SVG Export command does.

Release history

0.1.0

2013-05-03: First public release.

0.0.1

2013-04-24: Initial release.