OK - James I did
I assume (I really do), that older AdobeIllu Versions stored the width/height properties natively in the head part, just like:
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="520px" height="96.2px" viewBox="0 0 520 96.2" enable-background="new 0 0 520 96.2" xml:space="preserve"
>
while CC version is storing it as meta-data (ugly code snippet not worth to share).
By doing so, I assume Freeway lost the “path” and you import a file with 0px/0px.
And that’s what I did:
If you have AdobeIllustrator CC (important, not aware if it works with older versions as well) by hand, select all items (of your icon) and choose Edit → Copy (yep simple copy), open a text-editor of your choice (I do Brackets) and paste the entire code into a new file, save it as icon.svg (or whatever).
This creates a svg-version as above mentioned and shown in the code-area). It’ll show up in Freeway:
Making this responsive:
Selecting the svg-item, choose Item → Extended and enter in the embed-Tab:
width:100%
height: 100%
Naturally the svg-object requires a parent DIV to take place.
I am not aware of actions and compatibility, cause I’m not interested in. The logo of this page is done by this method:
http://backstage.kimmich-digitalmedia.com/templates/GridMeister/index.html
###Now a few general notes to SVG embedding:
We should know, that there are several ways to skin the cat.
####The easiest way would be:
<img src="Resources/myscalable.svg">
Unfortunately, this is currently not available in Freeway.
####The second possibility is CSS or background-image
#item1 {
background-image: url(Resources/myscalable.svg)
}
Unfortunately as well not possible right now.
####The third way is simply pasting code using SVG
<svg>blabla</svg>
This method makes the SVG targetable for further tweaking like animation or manipulating with CSS and/or JavaScript.
####Further methods:
iFrame, object, embed - while Freeway uses object and embed which was for long time the only possibility to embed SVG. I think it’s a bit bloated and slightly deprecated these days and I furthermore think (without any proof) that targeting by CSS or JavaScript is a lil bit more difficult.
So my basic problem is, the easier ways are not available right now. This is just because we have still to take care of cross-browser just work. This is a pity cause the fallback wouldn’t be that dramatic:
jQuery and Modernizr should do the game quite easily.
if(!Modernizr.svg) {
$('img[src$="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
So it would require a PNG version of the icon (icon.png) as alternative - doable I think.
Well that’s all I know so far - it isn’t much. More will follow - perhaps.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options