I’m wondering how to make an SVG work in my responsive site. I can’t get it to resize with the window, so I’m clearly doing something wrong.
Can anyone give me an pointers for the settings?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I believe you have to set some attributes in the SVG itself – its width must be 100% and there’s an auto-scale attribute that gets set to something that means ‘keep it proportional’. I don’t have the details in front of me, but I was just looking into this a few days ago. Once you have done this in the SVG, you can then use the dimension of the DIV that contains the SVG to manage the scaling. (Answering the question 100% of WHAT? with the bounds of the container.)
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter …
well this day should go down in FW history because for once I can tell you something instead of the other way around. 
Of course … I’m only transmitting the info!
Caleb’s site has this page : http://calebgrove.com/articles/flexible-width-images
which tells us how.
So I put an image item inside an html item on a responsive page. Set the html item to 100% width and flexible. Then set the image’s extended to width-auto, height-auto, max-width-100% just as Caleb said … and it works.
I found though that whilst the text is maybe sharper than my png image, it’s still a png image, so it’s not as sharp as just text. I don’t know why this is or how to just use a ‘pure’ vector, instead of presumably, a png being made by FW??
Here’s my test page (not properly scaled and centred) it’s the Logo at the top (synonyms with the text underneath)
http://test.synonyms.fr/testsvg.html
You can look at any of the other pages to see how it looks with the normal png.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Grant,
As you said, what you have on your testsvg page is simply a flexible png that Freeway is converting your SVG into. While it looks fairly decent (even on a Retina MacBook Pro), the file size is probably far larger than it could be.
To use a proper SVG on the page, you will want to apply the SVGimage action to the graphic item. It will track down the original SVG that you imported and stick it into the code. It also will provide the PNG that Freeway creates as a fall-back for browsers that don’t support SVG (IE8 and a lot of android browsers).
Then, making your SVG flexible should be as easy as sticking this snippet in Page > HTML Markup… > Before </head>:
<style type="text/css">
object {
width: 100%;
}
</style>
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Caleb.
I’ve tried everything I can think of, but it doesn’t work for me. I’ve removed everything else from the page too.
I can see in the web-inspector, that the action has created a png (thanks Walter!) and that it is resized when the window is resized. I can also see that the svg is there. But nothing I try can get the svg to resize. 
Any other suggestions?
http://test.synonyms.fr/testsvg.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
From what I have read, this comes down to the internal (in the SVG) code, not anything you apply to the SVG from outside (like in Freeway or another HTML generator/editor). There are properties you can set within the SVG that tell it to maintain its aspect ration and to have a 100% width. If you do those things (and don’t internally set the SVG to have a fixed pixel dimension in either axis) then you can scale it with impunity.
Walter
On Oct 25, 2014, at 9:20 AM, grantsymon email@hidden wrote:
Thanks Caleb.
I’ve tried everything I can think of, but it doesn’t work for me. I’ve removed everything else from the page too.
I can see in the web-inspector, that the action has created a png (thanks Walter!) and that it is resized when the window is resized. I can also see that the svg is there. But nothing I try can get the svg to resize.
http://test.synonyms.fr/testsvg.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Grant,
I’ve been poking around with the source code for the SVG, and let me just say that you have a very odd SVG that isn’t flexible-friendly. Nor can I figure out how to tweak the code to make it flexible.
With that said, I took the liberty to import your logo into Sketch, make a few tweaks, and export it. The result is indeed flexible. Feel free to use it: http://cl.ly/YDJv
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I have tweaked Caleb’s version - which didn’t work for me - to get it responsive.
http://www.deltadesign.co/FW7Test/svg-test.html
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So many FW heavyweights disagreeing (or agreeing?) with so little specificity in a single short thread!
Would be great to have a post to reference on this topic to avoid the topic coming up again, and if and when it does, have something to refer people to without revisiting the issue.
What were those tweaks you made in Sketch, Caleb? Did you need to specify flexibility like Walt suggested?
DD: What did you tweak that got Caleb’s to work?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
DD: What did you tweak that got Caleb’s to work?
The following is my revised version of Caleb’s
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 1113 104" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
<title>Synonyms</title>
<desc>Language Services</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Group" sketch:type="MSLayerGroup">
<path d="M0,25.3955 L0,50.7927 L110,50.7927 L110,83.849 L0,83.849 L0,93.525 L127,93.525 L127,41.1176 L17,41.1176 L17,9.6735 L127,9.6735 L127,-0.0017 L0,-0.0017 L0,25.3955 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M179.9,19.8323 L204,39.747 L204,69.3367 L221,69.3367 L221,39.102 L269.5,-0.0017 L249.2,-0.0017 L245.5,3.3846 C243.4,5.3197 235.2,12.2535 227.2,18.7842 L212.6,30.7169 L194.2,15.3979 L175.8,-0.0017 L155.8,-0.0017 L179.9,19.8323 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M292,34.6675 L292,69.3367 L308,69.3367 L308.2,41.5207 L308.5,13.6241 L340,41.5207 L371.5,69.3367 L390,69.3367 L390,-0.0017 L374,-0.0017 L373.8,27.4918 L373.5,54.9853 L342.1,27.4918 L310.6,-0.0017 L292,-0.0017 L292,34.6675 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M429.9,5.239 C424.9,14.1885 422.7,23.2186 422.7,34.6675 C422.7,46.1164 424.9,55.1465 429.9,64.096 L432.9,69.3367 L478.8,69.3367 C516.8,69.3367 525,69.1755 525.9,68.208 C530.2,64.096 536,44.7458 536,34.6675 C536,24.5893 530.2,5.239 525.9,1.1271 C525,0.1596 516.8,-0.0017 478.8,-0.0017 L432.9,-0.0017 L429.9,5.239 Z M515,12.0116 C517.4,15.7204 520,27.3306 520,34.6675 C520,39.5051 519.3,44.7458 518,49.019 C514.7,59.9841 519.3,58.8553 479.1,58.8553 L444.2,58.8553 L442.7,55.7916 C440.2,50.7927 438,40.8757 438,34.7482 C438,28.2981 440,18.8648 442.5,13.866 L444.2,10.4797 L479.1,10.4797 C512.5,10.4797 514,10.5603 515,12.0116 L515,12.0116 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M568,34.6675 L568,69.3367 L584,69.3367 L584.2,41.5207 L584.5,13.6241 L616,41.5207 L647.5,69.3367 L666,69.3367 L666,-0.0017 L650,-0.0017 L649.8,27.4918 L649.5,54.9853 L618.1,27.4918 L586.6,-0.0017 L568,-0.0017 L568,34.6675 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M711.9,19.8323 L736,39.747 L736,69.3367 L753,69.3367 L753,39.102 L801.5,-0.0017 L781.2,-0.0017 L777.5,3.3846 C775.4,5.3197 767.2,12.2535 759.2,18.7842 L744.6,30.7169 L726.2,15.3979 L707.8,-0.0017 L687.8,-0.0017 L711.9,19.8323 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M825,34.5869 L825,69.3367 L841,69.3367 L841,10.4797 L843.8,10.4797 C848.4,10.4797 857.1,12.8179 862.2,15.4785 C868.5,18.7036 872.7,22.6543 876.4,29.0237 L879.5,34.2644 L879.8,51.7603 L880.1,69.3367 L895.8,69.3367 L896.2,52.1634 C896.6,36.6832 896.8,34.6675 898.9,30.3944 C903.7,20.558 917.4,11.931 930.3,10.8022 L936,10.2378 L936,69.3367 L952,69.3367 L952,-0.0017 L943.3,-0.0017 C918.4,0.079 898.8,7.8191 890.7,20.558 L888.3,24.5087 L886,20.9611 C882.8,15.8817 872.5,7.9803 865.9,5.3197 C857.2,1.9334 850.6,0.8046 837.3,0.2402 L825,-0.2435 L825,34.5869 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<path d="M986,25.3955 L986,50.7927 L1096,50.7927 L1096,83.849 L986,83.849 L986,93.525 L1113,93.525 L1113,41.1176 L1003,41.1176 L1003,9.6735 L1113,9.6735 L1113,-0.0017 L986,-0.0017 L986,25.3955 Z" id="Shape" fill="#8878A8" sketch:type="MSShapeGroup"></path>
<text id="LANGUAGE-SERVICES" fill="#CF7319" sketch:type="MSTextLayer" font-family="Arial" font-size="17.9020979" font-weight="normal" letter-spacing="35">
<tspan x="198.029" y="98.601" fill="#CF7319">LANGUAGE SERVICES</tspan>
</text>
</g>
</g>
</svg>
The key line being
<svg width="100%" height="100%" viewBox="0 0 1113 104" preserveAspectRatio="xMinYMin meet" version="1.1"
Caleb’s original was
<svg width="1113px" height="104px" viewBox="0 0 1113 104" version="1.1"
I haven’t examined Grant’s original to compare it with Caleb’s though.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So many FW heavyweights disagreeing (or agreeing?) with so little specificity in a single short thread!
What were those tweaks you made in Sketch, Caleb?
Actually, the tweaks I made were to fix some visual problems that Sketch created when it imported the SVG. I’m not quite sure why Sketch’s SVG was flexible while your’s was not - I even copied parts of Sketch’s code and pasted in your SVG, but to no effect.
There were two problems I noted with your SVG right off the bat. There was no viewbox attribute, and the small text size was set to 20px (it should be set to 20 without the px for it to scale properly).
One other thing I noticed about your SVG is that there were <g> (group) elements around every single letter - I’ve never seen this before with my Sketch exports. However, I have no clue if this could be the cause to your flex maladies.
From taking a quick glance at the source, DD changed this:
<svg width="1113px" height="104px" viewBox="0 0 1113 104" ...>
To this:
<svg width="100%" height="100%" viewbox="0 0 1113 104" preserveAspectRatio="xMinYMin meet" ....>
When it comes to the width and the height values, I prefer to leave those as pixel values when I’m going to use the SVG in Freeway with the SVGimage action. Why? Because Freeway will use those values to generate a correctly-sized fallback image for IE8. Then, to make it flexible I use some CSS to set the object element to width: 100% (I shared that code above).
The reason why the SVG wasn’t flexible for DD is because he was directly embedding the SVG code instead of using the SVGimage action.
I’m not read-up on the preserveAspectRatio attribute, so I’ll let Delta Dave explain what is going on there.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Whoops, sorry Peter, I thought you were Grant!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The reason why the SVG wasn’t flexible for DD is because he was directly embedding the SVG code instead of using the SVGimage action.
I actually did use the SVG action but couldn’t get it to work on your version until I changed the width and height parameters.
As far as the preserveAspectRatio attribute goes - something I read somewhere re compatibility.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I actually did use the SVG action
And on my example page the top version uses the action while the bottom is embedded to allow extra css styling.
http://www.deltadesign.co/FW7Test/svg-test.html
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 25 Oct 2014, 4:15 pm, Caleb Grove wrote:
Grant,
I’ve been poking around with the source code for the SVG, and let me just say that you have a very odd SVG that isn’t flexible-friendly. Nor can I figure out how to tweak the code to make it flexible.
With that said, I took the liberty to import your logo into Sketch, make a few tweaks, and export it. The result is indeed flexible. Feel free to use it: http://cl.ly/YDJv
Wow! Thanks Caleb. I certainly caused something of a flurry here.
I dropped in your file and it works perfectly. Maybe I should be using Dave’s though??
I used the new illustration app Affinity Designer to make the svg. I’ve posted a bug report a few minutes ago, so I’ll wait and see what they say. (Really nice app BTW … challenger for Illustrator and by coincidence, another UK based company).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you, DD and Caleb, for the extra effort to explain what you did.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I dropped in your file and it works perfectly. Maybe I should be using Dave’s though??
Dave and I compared notes off-list and we decided that the reason why my method wasn’t working for him was because he is using Safari 5 - while I’m running v8. So, I would recommend his method if you want to be able to properly support past versions of Safari.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Safari 5? Wasn’t that last century?
Actually … I wonder if Walter’s code could be tweaked to add Safari 5 for the png over-ride.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The Affinity chaps asked this question, but I have no idea how to apply it.
"What happens to your SVG if you manually add the line:
viewBox=“0 0 1130 120”
into the outermost tag, after the width and height specifiers?
Failing that, what happens if you then change the width and height to say 100% instead of a pixel dimension?"
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Grant,
If you open the SVG file in your favorite text editor, you can make those changes on line #3.
One interesting thing is that if I apply the viewBox bit to the SVG that you currently have up on http://test.synonyms.fr/testsvg.html, the SVG does become flexible. It wasn’t doing this earlier!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options