Very late to the SVG party, but you have to join too

steveb · 4 April 2019 07:21

Mostly due to the fact that the software I’ve been using didn’t support SVG’s I’ve avoided them. Yesterday I finally joined the 21st century by getting Affinity Designer, and so finally learn to make and use SVG’s. And they’re nuts.

Long story short I took a logo I made the other day, flattened it and converted it to an SVG using one of the online sites. Then dropped it into Designer, added back in the colours and strokes etc. and exported as an SVG. The PNG I started with was about 200kbs, the SVG I ended up with was 7kb. I then put it thru ImageOptim and it got reduced to 3kb.

I added to the project using @tav Blueprint SVG stack, set the sizing and voila, all instances of the PNG in the page replaced with the SVG version which scaled perfectly.

Then the fun began as I played with the SVG stack settings: If you’ve added a stroke to the SVG the stack allows you to change the colour or completely remove it (make it 100% trans). AND you can even change the colour of the SVG. That’s pretty brilliant.

So, on one page of the project I’m working on there were three versions of the original logo: Multi-coloured with stroke. White with no stroke and purple with no stroke, total download size about 500kbs. Now all that’s reduced to 3kb. Plus, all instances look pin sharp.

If you haven’t yet started to use SVGs for icons and logos and stuff, it’s well worth the effort, and worth getting Tavs Blueprint stacks too, which contain the SVG stack: https://www.bigwhiteduck.com/stacks/blueprint/

I don’t think RW natively supports SVG’s yet for site logos and stuff, which is a shame, but hopefully it’s coming.

pmjd · 4 April 2019 07:37

Always a good word of warning for SVG logos with any typeface in them, make sure you pick the option to convert to outlines (or similar in your SVG graphics program), otherwise the font you use may be replaced by a fallback font on the visitors computer and ruin the look.

Used an SVG logo on a non-RW part of my site and it works well but trying to use Blueprint orWill’s SVG image stack and for some reason the sizing is way off on the RW pages, probably something I’ve gotten wrong in the export but going to hopefullly get more time to play around with it this week.

steveb · 4 April 2019 07:39

Haven’t used Wills, didn’t know he had one, but in the BP SVG stack you define the width of the SVG at up to three breakpoints. Maybe that’s what you missed?

Good call on the font thing, not tried to make an SVG with fonts yet, so your advice is noted, thanks.

Webdeersign · 4 April 2019 08:11

Different apps create SVG’s in different ways that can affect how the SVG is sized. There are advantages to using an SVG that has no size associated with it and advantages using SVG’s with a size. You can edit the SVG code with a text editor (by opening the SVG with a text editor) and alter how the SVG appears. SVG’s that have a max size usually have a width and height defined in the SVG text code. You can search the first couple of lines for the width and height and remove both and replace with preserveAspectRatio=“none” and save. This will remove the size limits and allow the SVG to grow to fill it’s container.

Lot’s of really useful information at - https://css-tricks.com/scale-svg/

steveb · 4 April 2019 08:28

This is the project I’m working on: https://ci-clientservices.com/clientdev/stems/

Every instance of the logo/icon on that page (the flower in the curly bits) is the same SVG code with different colours applied using the BP SVG stack.

It’s fair to say I’ve gone a little over board on the use of the SVG on that page, but I’m just playing with different ideas at the moment.

To get the logo/icon into the circle with the white background I’m using a Blueprint stack with sizing, border and colour child stacks in-place as the container for the SCG stack.

EDIT: The white logo in the nav bar isn’t an SVG, it’s a regular png as (I don’t think) RW supports SVG’s as site logos yet.

Webdeersign · 4 April 2019 09:02

Lovely to see your latent inner feminine side protruding through.

steveb · 4 April 2019 09:38

Latent? I only wear women’s underwear. And only lacy stuff too.

pmjd · 4 April 2019 10:32

Thanks @steveb @Webdeersign , I made the SVGs in Affinity and did notice that they had width and height of 100% but will try removing and see what happens.

paul.russam · 4 April 2019 10:47

The 100% x 100% is good, it means that the svg will fill the container its placed in. It’s only when the app that created the svg uses px as a size that you need to edit it.
I tested various apps and Affinity exported the cleanest/most suitable svg code.

In Affinity, you can specify that exported svg’s not only convert text to curves but also that they use # values in their colours instead of rgb(000,000,000) so their colours will match your site.

If you use Tav’s BP SVG stack then the size becomes irrelevant as you only paste the code between the brackets and BP SVG does all the sizing control.

Webdeersign · 4 April 2019 10:48

100% width or height is usually OK. Where the preserveAspectRatio=“none” works best is when there is a width or height being expressed in pixels.

In my experience the current version Affinity creates well behaved SVGs with no width or height. Graphic App also creates well behaved SVG’s and does add a width and height created either from the canvas size or from the canvas size and the export size control. So for example, with Graphic, you could create an SVG using a canvas size of 500px x 500px, but export it with a 100x factor to create an SVG with a huge max size of 50,000px so it would effectively never reach it’s max size.

aidy · 4 April 2019 14:23

This is good advice, I used a typeface in my svgs and have noticed in some browsers that its not right, fallback to sans serif which is very different. Will work on this Monday and redo my previous work. Thanks.

aidy · 4 April 2019 14:27

How do you do this Paul? I’ve set my copy / paste in AD to be SVG, I assumed this was how you get the SVG code to paste into BWD BP SVG stack, obviously what you are talking about is something more advanced. Care to elaborate? I’d appreciate it.

tav · 4 April 2019 15:04

Always “convert to curves” on all text so that it is just vector lines. If you embed text then it will rely on the user having that font installed on their computer

paul.russam · 4 April 2019 15:28

If you’re generating you svg by File>Export>SVG then click the More button and you’ll see this:

If you use the Export Persona then you’ll see something similar in the SVG setting for the export format.

mitchellm · 4 April 2019 15:36

@paul.russam I get the export text as curves part. Why is “using hex colors” important in this situation? What happens if I don’t check that box?

BTW: thanks for the info. Very useful.

steveb · 4 April 2019 15:38

I’m sure Paul will correct/confirm, but I think it’s so that the colours match the intended perfectly.

I think.

paul.russam · 4 April 2019 15:40

The colours in the svg will be exported as rgb values but you set the colours in your RW project using # values.
If you have a colour(s) in your svg that you are using in the project they will differ BUT if you tick the ‘Use hex colours’ option they will be the same.

paul.russam · 4 April 2019 15:52

This is the code from a simple svg export without those 2 ticked:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="100%" height="100%" viewBox="0 0 321 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
        <g transform="matrix(1,0,0,1,-275,-187)">
            <rect x="285.292" y="203.878" width="145.66" height="132.744" style="fill:rgb(0,0,255);"/>
            <rect x="387.249" y="257.725" width="145.66" height="132.744" style="fill:rgb(0,255,0);"/>
            <rect x="493.462" y="211.393" width="94.015" height="100.343" style="fill:rgb(255,0,0);"/>
            <g transform="matrix(6.77647,0,0,6.77647,-3453.25,-1976.99)">
                <text x="560.481px" y="339.582px" style="font-family:'Bitter-Regular', 'Bitter';font-size:12px;">Hello</text>
            </g>
        </g>
    </svg>

And this is exactly the same svg with them ticked:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 321 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-275,-187)">
        <rect x="285.292" y="203.878" width="145.66" height="132.744" style="fill:#00f;"/>
        <rect x="387.249" y="257.725" width="145.66" height="132.744" style="fill:#0f0;"/>
        <rect x="493.462" y="211.393" width="94.015" height="100.343" style="fill:#f00;"/>
        <g transform="matrix(6.77647,0,0,6.77647,-3453.25,-1976.99)">
            <path d="M564.381,338.862L564.381,339.582L560.961,339.582L560.961,338.862L561.981,338.622L561.981,332.142L560.961,331.902L560.961,331.242L564.381,331.182L564.381,331.902L563.241,332.142L563.241,334.782L567.261,334.782L567.261,332.142L566.121,331.902L566.121,331.242L569.541,331.182L569.541,331.902L568.521,332.142L568.521,338.622L569.541,338.862L569.541,339.582L566.121,339.582L566.121,338.862L567.261,338.622L567.261,335.742L563.241,335.742L563.241,338.622L564.381,338.862Z" style="fill-rule:nonzero;"/>
            <path d="M575.901,336.558L571.761,336.582C571.761,337.238 571.919,337.762 572.235,338.154C572.551,338.546 572.973,338.742 573.501,338.742C573.677,338.742 573.853,338.726 574.029,338.694C574.205,338.662 574.371,338.622 574.527,338.574C574.683,338.526 574.825,338.472 574.953,338.412C575.081,338.352 575.189,338.294 575.277,338.238L575.517,338.082L575.937,338.706C575.665,338.922 575.415,339.092 575.187,339.216C574.959,339.34 574.691,339.452 574.383,339.552C574.075,339.652 573.741,339.702 573.381,339.702C572.437,339.702 571.721,339.416 571.233,338.844C570.745,338.272 570.501,337.49 570.501,336.498C570.501,336.002 570.573,335.546 570.717,335.13C570.861,334.714 571.063,334.356 571.323,334.056C571.583,333.756 571.893,333.522 572.253,333.354C572.613,333.186 573.009,333.102 573.441,333.102C575.121,333.102 575.961,334.042 575.961,335.922L575.901,336.558ZM571.809,335.682L574.689,335.682C574.689,335.194 574.585,334.798 574.377,334.494C574.169,334.19 573.833,334.038 573.369,334.038C572.913,334.038 572.549,334.192 572.277,334.5C572.005,334.808 571.849,335.202 571.809,335.682Z" style="fill-rule:nonzero;"/>
            <path d="M578.925,330.342L578.925,338.622L580.125,338.922L580.125,339.582L576.681,339.582L576.681,338.922L577.701,338.622L577.701,331.302L576.681,331.062L576.681,330.402L578.925,330.342Z" style="fill-rule:nonzero;"/>
            <path d="M582.729,330.342L582.729,338.622L583.929,338.922L583.929,339.582L580.485,339.582L580.485,338.922L581.505,338.622L581.505,331.302L580.485,331.062L580.485,330.402L582.729,330.342Z" style="fill-rule:nonzero;"/>
            <path d="M584.469,336.498C584.469,335.986 584.543,335.52 584.691,335.1C584.839,334.68 585.049,334.322 585.321,334.026C585.593,333.73 585.915,333.502 586.287,333.342C586.659,333.182 587.069,333.102 587.517,333.102C588.413,333.102 589.109,333.386 589.605,333.954C590.101,334.522 590.349,335.31 590.349,336.318C590.349,336.814 590.277,337.268 590.133,337.68C589.989,338.092 589.787,338.448 589.527,338.748C589.267,339.048 588.951,339.282 588.579,339.45C588.207,339.618 587.793,339.702 587.337,339.702C586.425,339.702 585.719,339.43 585.219,338.886C584.719,338.342 584.469,337.546 584.469,336.498ZM587.469,334.062C586.309,334.062 585.729,334.842 585.729,336.402C585.729,337.962 586.289,338.742 587.409,338.742C587.993,338.742 588.419,338.542 588.687,338.142C588.955,337.742 589.089,337.142 589.089,336.342C589.089,334.822 588.549,334.062 587.469,334.062Z" style="fill-rule:nonzero;"/>
        </g>
    </g>
</svg>

The 1st one has the colours of the shapes as style="fill:rgb(0,0,255)" whilst the 2nd has style="fill:#00f;"

Also note in the 1st the text is specified with the font as ‘Bitter’ and the text as ‘Hello’ whereas the 2nd is now graphic elements in the shape of the word ‘Hello’. The 1st will only work if the person viwing the svg/page has Bitter installed.

aidy · 5 April 2019 07:27

Excellent. I’m going have go when I get back to town. This has been bugging me for a while. Cheers @tav @paul.russam

peterdanckwerts · 9 April 2019 20:10

For SVG animations, Keyshape is great, and for tiled patterns, Patternodes is fantastic. Sadly, the latter can export SVG animations but they consist of many different SVG images, rather than a few elements animating.