[Pro] SVG woes

Here’s how I use SVGs in Freeway:

  1. New document.
  2. Sketch a Graphics Box.
  3. Apply the SVGimage Action (ver.0.2) to the Graphics Box and tick IE8.
  4. CMD-E to import the SVG.

The problem on some SVGs is that they won’t display at all in Freeway’s Page View. And yet, other SVGs display just fine. I discovered the reason why by opening the SVGs in TextEdit.

The SVGs which display fine in Freeway’s Page View have the following line of code inside them:

width="318px" height="127px" viewBox="...

The SVGs that won’t display in Freeway’s Page view are missing the WIDTH and HEIGHT attributes.

The problem is, I don’t see how to make Adobe Illustrator generate WIDTH and HEIGHT attributes when I save my SVGs.

Of course, I can manually HACK the SVG files by adding WIDTH and HEIGHT in TextEdit, but must I really do that? Isn’t there an easier way to get my SVGs to display properly in Freeway’s Page View?

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Calling all SVG users…

Calling all SVG users…

Hello, SVG users…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t see how to make Adobe Illustrator generate WIDTH and HEIGHT attributes when I save my SVGs.

Maybe you should be asking over in Illustratorville?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the reply.

Do you use SVGs in Freeway, Dave? Or have you ever created them?

(Just curious)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you use SVGs in Freeway, Dave? Or have you ever created them?

Yes to both but I have tweaked the code manually - I am only an infrequent user of AI.

And only had to use a few simple SVGs with FW so my experience is limited.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, I am happy to hear at least one other among us has experienced the same thing as I have.

It seems to be an Illustrator thing. I also have Affinity Designer 1.1.2 and using the EXPORT command, I can create an SVG with HEIGHT & WIDTH tags. (I didn’t notice that until today because I almost never use Affinity Designer.) The only disadvantage I see is that the same SVG opened and Exported in Affinity Designer is a tad bigger in terms of filesize relative to the same SVG open and saved in Illustrator. But again, saving SVGs in Illustrator will kill the HEIGHT & WIDTH tags, making use in Freeway problematic.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I spotted a post in the Affinity Designer forum that mentions a possible reason why some apps like Illustrator may EXCLUDE the Height and Width tags when they save SVGs…

By replacing [Height & Width] attributes with viewBox="0 0 50 50", 
the size can now can be controlled using CSS, e.g., svg { width:100%; }

But even if one were intent on using CSS styling for SVGs in Freeway, we have the following caveats:

  1. A lot of CSS tweaks we make in Freeway are not displayed in Page View (which bothers me A LOT).
  2. The problem whereby Freeway won’t auto-generate the fall-back bitmapped image (due to the lack of Height & Width tags) remains.

So for now, the solution is only one of the following:

  1. Manually hack the Illustrator-generated SVGs in a text editor to add Height and Width tags.
  2. Use Affinity Designer to Export the SVGs, with the understanding that the file size will be slightly larger than Illustrator generates.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

  1. Use another App that retains height, width data with comparable file size to Illustrator

Don’t ask me what that App is - I am sure that there are several to choose from.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dave, please read my previous 2 posts. I mention that “other app” by name! :slight_smile: But there are caveats…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I know this isn’t any consolation, but I never use SVGs without heavily modifying their innards to remove all the junk that the generator app left behind (gigantic amounts of code bloat). At that time, I simply add the width and height attributes if they are missing.

At the very least, you should use this tool to help strip away some of the AI code bloat: http://petercollingridge.appspot.com/svg-editor

I do agree though that Freeway needs to clean up its SVG act – as we work with 2x, and now 3x, screens, having resolution independent imagery/icons is incredibly helpful.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you, Caleb!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

please read my previous 2 posts. I mention that “other app” by name!

Yes - but you said that Affinity Designer output wasn’t as small as the AI one - I am suggesting that there are other apps out there that may produce a smaller file size than AD does.

Pixelmator and Inkscape are a couple of possibilities that spring to mind - haven’t checked their file output size VS AI though!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi guys,

I have no experience with SVG at all, so I can’t speak for its implementing in Freeway. So maybe I’m wrong here (I assume I am entirely). I’m little experienced in AI and so two things:

Canvas doesn’t matter, dimension doesn’t matter.

So a SVG basically doesn’t require any width and height attributes at all and can be applied everywhere.

Just as example, in InDesign I’ll just scale them there (e.g. 80% of its parent container). If I consequently adapt this to web, I’d say that width and height will be applied there as well and browser does the rest.

That already said is highly explosive half-knowledge, but after I am ready to go on text-styling things, SVG will be the next thing to tackle cause 99.99% of company logos are done vector-based, a shame not to use this stuff as dedicated: SVG

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you guys for this conversation. I have wanted to learn more about svg files and this is good information.There are several sites I’ve been using svg and will revisit those to optimize the files.

As a side note, having used ai for decades, I’ve found new enthusiasm and am unusually impressed in using Affinity Designer over the last few months. It is incredible and growing very quickly as my go to app for many tasks previously done elsewhere.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas, you need to spend time with SVGs in Freeway. Then you will understand my previous posts in this thread. To repeat, artboard size and Height / Width attributes (within the SVG code) matter due to how Freeway presently generates a bit mapped fallback image.

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - James I did :slight_smile:

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

I looked into using SVG some time ago. The Can I Use website (Can I use... Support tables for HTML5, CSS3, etc) highlights that IE 9–11 has trouble scaling SVG in a fluid layouts. This post on Stack Overflow provides the answer: css - SVG in img element proportions not respected in ie9 - Stack Overflow

It would seem that you have to manually open the SVG file (created by Illustrator for example) and remove the width and height attributes. It will then scale in IE 9–11 and all other modern browsers.

The trouble is, SVG files with no width and height attributes don’t display in FW Page View.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

In the short term this (removing width/height attributes from an SVG as it’s published) sounds like the job for an Action… :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at: