Versions

SVGimage.fwaction (2013-04-23) (Downloaded 124 times)

Contains:

  • SVGimage (item-action) - v. 0.2

Compatible: Pro 5, Pro 5.5, and Pro 6

SVGimage.fwaction (2013-03-19) (Downloaded 2 times)

Contains:

  • SVGimage (item-action) - v. 0.1

Compatible: Pro 5.5 and Pro 6

Author: Walter Davis

html 5 svg

This Action allows you to use Retina-ready SVG graphics in your Freeway page, while providing a JPEG fallback for elderly browsers.

Draw an image box on the page and import an SVG graphic at 100% scale (very important). Apply the Action to the image box. There are no controls or settings.

21 Comments

Yeah, if you are able to import the SVG as a pass-through image, you will find that it will work perfectly in modern browsers without this Action, but any IE < 10 or 11 will not show anything. You have to import the image as a normal graphic in order to force Freeway to create the JPEG fallback.

If you create SVG's in Illustrator, read this: http://tinyurl.com/carpoyk

In my experience, converting text to Outlines solves font problems, but the SVG filesize skyrockets! The smallest filesize is obtained by using Adobe CEF and "Only Glyphs Used" but those fonts won't display in most browsers. And SVG fonts aren't supported by FireFox. Embedding a WOFF font would be ideal, but neither Illustrator nor this Action make that an easy task.

To be fair, this Action does nothing except get Freeway to link up the original image along with its converted (JPEG) version. It cannot influence the inner workings of the SVG – Freeway (and thus the Actions API) have no particular powers there.

With me the Action does not work. I import a SVG (not as a pass-through but I tried this as well) into a graphic box and set the Action to work. While Safari shows the SVG correctly, Firefox and IE do not display the JPEG fallback although Freeway does create and upload it. What am I doing wrong ?

Please post a link to your page. Also, make sure that your Web server properly supports the svg mime-type. It may not be configured correctly.

Thanks for your answer. Here's the link to the page: www.biriba.ch HTML for the banner ("biriba"): &lt;div id=&quot;biribaLogo&quot; class=&quot;f-ms&quot;&gt;&lt;object type=&quot;image/svg+xml&quot; data=&quot;Resources/biriba%20Logo.svg&quot;&gt;&lt;img src=&quot;Resources/biribalogo.jpeg&quot; border=0 width=188 height=113 alt=&quot;biribaLogo&quot; style=&quot;float:left&quot;&gt;&lt;/object&gt; Safari displays the SVG correctly !

The HTML-code vanished, sorry. Safari displays the SVG correctly !

You might try removing the space from the filename. I'm not sure why else it might appear correctly on one and not the other browser.

I did remove the space. Unfortunately, this does not solve the problem. Both SVG and JPEG are in the ressources folder. Firefox and IE seem not to show the JPEG but instead try to display the SVG.

Firefox should show the SVG, that's totally native. Make sure your server is sending the correct mime-type for SVG.

The Mime-Type for the SVG sent by the server is "image/svg+xml". I cannot post the html-code but under "data" it refers to the SVG and under "src" to the JPEG.

Try converting the letter characters to paths before you export as SVG. I see the SVG in Firefox, it just doesn't look very good because the embedded fonts are being ignored.

The problem was the SVG itself. It had been made with OpenOffice. I made the new one with Inkscape. The Action now works perfectly well. Tanks for your help !

Neither the SVG nor the fallback will appear in Freeway's PREVIEW (which is built on WebKit). Everything looks great when previewing in WebKit browsers like Safari or Chrome though. Is this a problem with your action, or is it a problem in Freeway? (I've confirmed this problem in Freeway 5.6.5 and 6.x.) Thanks.

WebKit is not Safari. It's just the HTML rendering engine for Safari. As far as I know, it doesn't even include the JavaScript runtime – Safari (and Freeway) adds that separately, too.

Adding a link to a graphic with the SVGimage Action applied displays a clickable link in Freeway's Preview only. When viewing in FF or Chrome or Safari there is no clickable link, despite the fact the HTML code contains the correct &lt;a href&gt;. If not a bug in the Action, then what's the solution to make a clickable link on SVGs?

Can this Action please be modified (or could someone please tell us specifically how to modify it) so that we can manually add the physical dimensions of the SVG within the Actions palette? The reason this is needed is because Illustrator (and other SVG creation apps) don't always include WIDTH & HEIGHT tags in the SVG's code, and without those tags you have two problems: (1) the SVG won't display in Freeway's Page View, and (2) Freeway will not generate the bitmapped fallback image. I can workaround the problem now only by opening my SVGs in a text editor and adding the WIDTH and HEIGHT tags. But that job would be much simpler and faster if it could be done within Freeway's Action palette, via the SVG Image action.

Thanks.

I'm confused. Do you want the Action to rewrite the contents of the SVG file, or to give the generated img tag the dimensions you set? I haven't tried to do the former, but the latter, while trivially easy to do, probably won't fix anything.

You're right, Walter. I didn't think about the need for the Action to re-write the SVG (which, as you say would not be a trivial task). So I guess I will need to stick with my present workaround for now (manually typing in those tags for each SVG in a text editor). Thanks.

Walter, does the SVG IMAGE action create the bitmapped fallback image for SVGs, or is Freeway doing that?

The absence of Height & Width tags is apparently important for CSS styling of SVGs, however, in Freeway the lack of Height & Width tags kills the creation of the bitmapped fallback image. More info on that on FreewayTalk here:

http://freewaytalk.net/thread/view/157714

Freeway builds it. It's done because when you import any image-like file into a graphics box, Freeway will try to build a JPG or GIF of it (whatever setting you use in the Export tab of the Inspector). The Action just looks up the path to the actual source file and constructs an inline SVG tag for it, using the Freeway generated image as the fallback. It's related to how my HTML5 Video Action works, in that you apply it to a graphics box, and that image gets used in the process.

Sign In or to comment.