Jump to content


Photo

SVG format


  • Please log in to reply
12 replies to this topic

#1 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 718 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 03 October 2006 - 05:41 AM

Heres a little info about SVG

--------------------------

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG is a royalty-free vendor-neutral open standard developed under the W3C

--------------------

I recently entered a competition for the SVG LOGO contest in here http://www.svglogo.com/index.html , by the way heres my entry ,
http://img223.images...eferencelr7.jpg. I had to save the fireworks png, open it in illustrator and save it to svg format , which is quite a hassle, and i hope fireworks could be able to do this.

#2 Buttars

Buttars

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 03 September 2009 - 06:28 AM

Heres a little info about SVG

--------------------------

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handeld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG is a royalty-free vendor-neutral open standard developed under the W3C

--------------------

I recently entered a competition for the SVG LOGO contest in here http://www.svglogo.com/index.html , by the way heres my entry ,
http://img223.images...eferencelr7.jpg. I had to save the fireworks png, open it in illustrator and save it to svg format , which is quite a hassle, and i hope fireworks could be able to do this.


I completely agree. I've always been able to do everything I need for websites using just Fireworks. With more and more modern browsers supporting svg and html 5 coming out we have to get some type of support for svg in Fireworks. I'm sure it will only help progress the movement of svg.

#3 Mikko

Mikko

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 152 posts
  • Location:Helsinki, Finland
  • Interests:Bacon

Posted 04 September 2009 - 01:12 AM

SVG support for Fireworks would be really useful, since UI's and graphics on mobilephones rely pretty much on that format.

#4 kristen92

kristen92

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 17 May 2010 - 07:35 AM

SVG support for Fireworks would be really useful, since UI's and graphics on mobilephones rely pretty much on that format.



I agree. It is the only way to go.

#5 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 02 June 2010 - 01:02 PM

I made a basic SVG export script, I haven't tested it much but you guys can give it a whirl and see how it works for you. It's attached as a .jsf, just copy it to [Fireworks installation directory]/Configuration/Commands/ and then access it via the Commands menu in Fireworks.

It will export all paths, groups and autoshapes, it handles basic solid fills and solid strokes, it handles linear and radial gradients but there's some weird things in SVG there so it might not always look right, and right now it only handles gaussian blur filters, but it could be expanded to implement more.

It doesn't do anything with text, images, symbols, or rectangle primitives.

Attached Files



#6 Bruce Bowman

Bruce Bowman

    FireworksCommander

  • Members
  • Pip
  • 8 posts
  • Location:San Jose, CA, USA
  • Interests:Fireworks, design and graphics for any screen/device, golf, snowboarding, hiking, cooking, scuba diving, traveling.

Posted 04 June 2010 - 04:51 PM

Hi Aaron,

This is super cool! I've been hoping someone would do this for a long time. To make it good, it seems like it will be a lot of work. I'm curious how committed to it you really are?

What motivated you to start this project?

The FXG export script in Fireworks CS5 is also a .jsf file. If you haven't already seen it, take a look. This will give you an idea of how you might structure your SVG script, and get some idea of how involved it is. I'm not sure whether FXG 2.0 is more or less rich than SVG, but assume that SVG is more rich since it has been around far longer. The nice thing about these being .jsf scripts is the ease with which they can be updated and extended.

The path to the FXG script is different on each OS:
Windows XP: <Installation Drive>:\Program Files\Adobe\Adobe Fireworks CS5\Configuration\HTML Code\
Windows Vista 64-bit: <Installation Drive>:\Program Files(x86)\Adobe\Adobe Fireworks CS5\Configuration\HTML Code\
Windows 7 64-bit: <Installation Drive>:\Program Files (x86)\Adobe\Adobe Fireworks CS5\Configuration\HTML Code\
Mac OS X: <HD>/Applications/Adobe Fireworks CS5/Configuration/HTML Code


Bruce

#7 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 05 June 2010 - 04:26 PM

To make it good, it seems like it will be a lot of work.


Totally agree, and to make it great it would take even more work. It takes grunt work to catch all the details.

I'm curious how committed to it you really are?

What motivated you to start this project?


I've just been toying a little bit with HTML5/CSS3/Canvas/SVG since I'm a Flash developer blissfully entrenched in the Flash platform, so to be honest it's partly just due diligence to stay on top of technology. I'm not using SVG in any serious way at the moment. I do like the idea of a standard rich graphics format, though. The real motivator would be if I had a practical need for SVG, which I just don't at the moment.

The script is the result of 2 or 3 days of tinkering between work. I can see myself tinkering it up to support some level of text, full support of Fireworks symbols, images to some extent, a few shape primitives, more filters, and maybe some level of masking. No scripting or animation. Then maybe I'll tinker with importing SVG? :)

The FXG script looks interesting. Actually it looks fairly similar to the way I approached it. I actually thought about using the Fireworks export API rather than command API, but I wasn't able to figure it out (ie couldn't find instructions on that extension structure in the documentation.)

I wouldn't really say FXG or SVG is more rich, personally, as they are both just markup specifications. As for the specifications themself, I find SVG annoyingly inconsistent and a bit obtuse at points. They also serve different purposes in my mind, FXG has much better parity to Fireworks and other Creative Suite apps, but SVG of course has the advantage of being supported in places FXG isn't intended for (like browsers.)

#8 arunmania

arunmania

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 06 June 2010 - 09:53 AM

The FXG script looks interesting. Actually it looks fairly similar to the way I approached it. I actually thought about using the Fireworks export API rather than command API, but I wasn't able to figure it out (ie couldn't find instructions on that extension structure in the documentation.)


Hey Aaron,

Really great to see SVG export support for FW! Even I have been thinking about the same for sometime now, but just couldn't start work on it :)
For FXG export, we had added an API to the existing extending FW document. Below are the details for the same.

API: fw.exportFXG()

Availability: Fireworks CS5

Usage: fw.exportFXG(doc, pages, fileUrl);

Arguments->
doc: specifies which document to export. Basically, the current opened document will be exported.
pages: Specifies All or only the current page to export.
fileUrl: Specifies, the file location to which it has to be exported.

Returns: A Boolean value, whether the export was successful or not.

Description:
This will export as FXG, either the current page or all the pages of the current opened document.

Apart from this, for being able to use File-->Export option for FXG (instead of choosing it from commands menu as it was in FWCS4), functionality was added in FWCS5 accordingly, in the export code. This is how the export dialog box understands that FXG export option has been choosen by the user.
In the FXG script, if you take a look at "WRITE_FXG(MXMLG)" function, this is the one that had been added in the code to accomplish the same.

Let me know if you need any more info.


-Arun

#9 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 07 June 2010 - 09:07 AM

Thanks Arun!

API makes sense, thanks.

Is there a way to add my own export option, or does that require changes to the native app to add to that list?

#10 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,506 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 09 June 2010 - 07:33 AM

It wouldnt be a bad idea to build a swf panel to control a few options such browse local disk to save, give file a name, or simply copy and paste into text editor. Instead of going the FXG route I'd suggest building the panel like Grant Hinkson did with the XAML exporter to Fireworks. Much more manageable in my opinion. :)

Instead of posting updates/bug fixes here, do you want to upload to sourceforge or use the download feature on fwguru so we can make revisions/rollbacks if necessary?

Grants Fw to XAML panel
http://www.granthink...l-panel-posted/

I'm actually more interested in getting Canvas to export than SVG for Fireworks. ;) Canvas is actually a faster renderer than SVG and there are more libraries to access then SVG. Also there seems to be more interest (at least for me and what I saw at Google IO) in Canvas as performance sucks with SVG when you have a lot of objects on screen.

#11 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 10 June 2010 - 10:12 AM

Hey Alan!

Yeah I thought of Grant's XAML editor. I've never really worked with XAML so unfortunately I haven't used the panel really.

As far as canvas, how would you export to that? Convert all Fireworks vectors to canvas drawing APIs? Canvas doesn't have a graphics data format does it? Do you know of a good reference for canvas APIs?

#12 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,506 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 30 June 2010 - 08:35 AM

Hey Aaron -
Sorry i didnt see this sooner....Developing for Android has some different aspects like using a 2D drawing api which appears similar to svg. One of the games we are working on utilizes a lot of the 2D drawing apis for objects that are drawn onto canvas. I think I was looking for something a little different. :S



Draw with a Canvas
When you're writing an application in which you would like to perform specialized drawing and/or control the animation of graphics, you should do so by drawing through aCanvas. A Canvas works for you as a pretense, or interface, to the actual surface upon which your graphics will be drawn it holds all of your "draw" calls. Via the Canvas, your drawing is actually performed upon an underlying Bitmap, which is placed into the window.

In the event that you're drawing within the onDraw() callback method, the Canvas is provided for you and you need only place your drawing calls upon it. You can also acquire a Canvas from SurfaceHolder.lockCanvas(), when dealing with a SurfaceView object. (Both of these scenarios are discussed in the following sections.) However, if you need to create a new Canvas, then you must define the Bitmap upon which drawing will actually be performed. The Bitmap is always required for a Canvas. You can set up a new Canvas like this:

Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);Now your Canvas will draw onto the defined Bitmap. After drawing upon it with the Canvas, you can then carry your Bitmap to another Canvas with one of theCanvas.drawBitmap(Bitmap,...) methods. It's recommended that you ultimately draw your final graphics through a Canvas offered to you by View.onDraw() orSurfaceHolder.lockCanvas() (see the following sections).

The Canvas class has its own set of drawing methods that you can use, like drawBitmap(...), drawRect(...), drawText(...), and many more. Other classes that you might use also have draw() methods. For example, you'll probably have some Drawable objects that you want to put on the Canvas. Drawable has its owndraw() method that takes your Canvas as an argument.


http://developer.and...hics/index.html

#13 Jason Waldrip

Jason Waldrip

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 03 June 2011 - 08:26 AM

I am trying to use this API call in a command script. The command script is designed to ungroup and delink all symbols for a clean FXG export. Unfortunately I am getting an error when trying to export the file and I am getting a file not found error. Can someone lend a hand here. Thanks!


// Store Current Page Name
pagename = fw.getDocumentDOM().pageName

// Duplicate the Page

fw.getDocumentDOM().duplicatePage(fw.getDocumentDOM().currentPageNum);
fw.getDocumentDOM().changeCurrentPage(fw.getDocumentDOM().currentPageNum + 1);

fw.getDocumentDOM().selectAll();

// Try Ungroup

fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();

// Detach Symbols

fw.getDocumentDOM().detachInstanceFromSymbol();

// Ungroup the Symbol
fw.getDocumentDOM().ungroup();

// Unselect Hidden Objects
fw.getDocumentDOM().selectNone();
fw.getDocumentDOM().selectAll();

// Try Ungroup Again
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().ungroup();


fw.getDocumentDOM().selectNone();

// Unlock Everything

fw.getDocumentDOM().setElementLocked(-1, -1, -1, false, true, true);

// Unselect Hidden Objects
fw.getDocumentDOM().selectNone();
fw.getDocumentDOM().selectAll();

// Group Shown Objects and Cut
fw.getDocumentDOM().group("normal");
fw.getDocumentDOM().clipCut();

// Delete Hidden Objects
fw.getDocumentDOM().showAllHidden();
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().deleteSelection(false);
fw.getDocumentDOM().clipPaste("ask user", "vector");
fw.getDocumentDOM().setSelectionBounds({left:0, top:0, right:990, bottom:698}, "autoTrimImages transformAttributes");

// Ungroup all and lock
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().ungroup();
fw.getDocumentDOM().selectNone();
fw.getDocumentDOM().setElementLocked(-1, -1, -1, true, true, true);

// Export FXG

FXGDir = "/Users/jwaldrip/Dropbox/KITD Design/Kit Digital/NGP (2011)/wireframes_svn/CMS/Wireframes/FXG/"+pagename
FXGUrl = FXGDir + "/" + pagename + ".fxg"
FXGAssets = FXGDir + "/" + pagename + ".assets" 

if (Files.exists(FXGDir) == false){
Files.createDirectory(FXGDir);
}

if (Files.exists(FXGAssets) == false){
Files.createDirectory(FXGAssets);
}

if (Files.exists(FXGUrl) == false){
	Files.createFile(FXGUrl, ".fxg", "FWMX");
}


fw.exportFXG(null, "current page", FXGUrl);
fw.getDocumentDOM().deletePageAt(fw.getDocumentDOM().currentPageNum);




Hey Aaron,

Really great to see SVG export support for FW! Even I have been thinking about the same for sometime now, but just couldn't start work on it :)
For FXG export, we had added an API to the existing extending FW document. Below are the details for the same.

API: fw.exportFXG()

Availability: Fireworks CS5

Usage: fw.exportFXG(doc, pages, fileUrl);

Arguments->
doc: specifies which document to export. Basically, the current opened document will be exported.
pages: Specifies All or only the current page to export.
fileUrl: Specifies, the file location to which it has to be exported.

Returns: A Boolean value, whether the export was successful or not.

Description:
This will export as FXG, either the current page or all the pages of the current opened document.

Apart from this, for being able to use File-->Export option for FXG (instead of choosing it from commands menu as it was in FWCS4), functionality was added in FWCS5 accordingly, in the export code. This is how the export dialog box understands that FXG export option has been choosen by the user.
In the FXG script, if you take a look at "WRITE_FXG(MXMLG)" function, this is the one that had been added in the code to accomplish the same.

Let me know if you need any more info.


-Arun