Scale SVG in symbols or groups & Target with CSS

Elements
1

I am trying to understand how Hype scales objects, especially SVG images in symbols or groups.

I have an SVG file inside a symbol with animations. When I try to scale the symbol, the bounding box changes, but the svg remains the same.

I had the same issue inside the symbol. I wanted to reuse the symbol with other SVG files, so I grouped an image, then tried to scale the group (of 1 SVG). It never worked. I finally had to ditch my hopes for reusing the symbol and just scale the SVG directly.

2

Some SVG elements define their width and height in PX values, and some use percentage values. An SVG will scale in its container if it uses percentage values, but there may be something else going on in your SVG files. Keep in mind that if you resize a symbol, it won’t resize elements within the symbol – you’ll need to double click on the Symbol (to enter it) and then resize elements by selecting them.

The ability to scale symbols separately is definitely on our radar.

3

Thanks Daniel for the fast response. I’ve been reading all the posts about the inability to scale multiple objects in Hype so I am anxious to see an improved solution. Still, I appreciate your explanation of the differences between elements and how they scale.

My svg is copied below if it sheds any light on this issue. It appears Sketch generates svgs that are based on pixels, yes? Would percentages be more flexible?

–

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="28px" viewBox="0 0 36 28" 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.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
    <title>icon-ok</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="dark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Main" sketch:type="MSLayerGroup" transform="translate(-4.000000, -407.000000)" fill="#8EB332">
            <g id="icon-ok" transform="translate(4.000000, 407.000000)" sketch:type="MSShapeGroup">
                <path d="M35.2512,5.304 C35.2512,5.9024 35.0472,6.4192 34.6392,6.8544 L15.0552,26.4384 C14.62,26.8464 14.1032,27.0504 13.5048,27.0504 C12.9064,27.0504 12.3896,26.8464 11.9544,26.4384 L0.612,15.096 C0.204,14.6608 1.91846539e-13,14.144 1.91846539e-13,13.5456 C1.91846539e-13,12.9472 0.204,12.4304 0.612,11.9952 L3.7128,8.8944 C4.148,8.4592 4.6648,8.2416 5.2632,8.2416 C5.8616,8.2416 6.3784,8.4592 6.8136,8.8944 L13.5048,15.6264 L28.4376,0.6528 C28.8728,0.2176 29.3896,0 29.988,0 C30.5864,0 31.1032,0.2176 31.5384,0.6528 L34.6392,3.7536 C35.0472,4.1888 35.2512,4.7056 35.2512,5.304 L35.2512,5.304 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>
4

I looked into this a bit, and found this tool to cleanup SVGs: https://jakearchibald.github.io/svgomg/

Toggle ‘Prefer Viewbox to Width/Height’ to ensure your SVG can scale correctly:

svttest.zip (14.2 KB)

I recommend requesting this option from Sketch’s export – seems useful to retain ratio, but not force a size.

1 Like
5

Again, thank you Daniel. That info was very helpful. Unfortunately that website doesn’t allow me to update hundreds of icon files in one batch, but it’s terminal counterpart does: https://github.com/svg/svgo I still want to find a way to simply export icons and use them. I have discovered Affinity Designer actually exports SVG files as percentages by default, so I’m now working there and having success.

Your post inspired some discussion over here and we’ve been hard at work trying to figure out the best SVG icon workflow within Hype. We need the following functions:

  1. Easily swap out SVGs for updated versions
  2. Target SVG with CSS (mainly color, but perhaps positioning)
  3. Scale easily

I see three main methods to insert SVGs in Hype:

  1. Drag SVGs from the Resources directly onto the scene
    Pros: Ease of use
    Cons: Total inability to target it with CSS
  2. Place SVG code inline in either a container or html widget.
    Pros: More control over CSS styles and customization
    Cons: Total inability to swap out easily
  3. Use…
    <object class="icon" data="${resourcesFolderName}/icon.svg"></object>
    inside a container or html widget
    Pros: Somewhat easy. Still able to be swapped out in the Resources
    Cons: We have not found the right selectors to target the SVG with css

Any light you could shed on this would be awesome. And sorry if I should be creating a new thread elsewhere.

6

In number 1, you say:

When your SVG is selected (after dragging into your scene from the resource library), you can set either a Unique element ID with the Identity inspector, or set a Class name if you'd like to make your SVGs part of a group.

7

I think you mean "inability to target ID's & classes inside the SVG"

I don't think you can target IDs & classes inside the SVG when it is called in this matter.

This is my preferred way if you want to dynamically control the SVG or parts thereof.

8

Here’s another tool for removing unnecessary code from SVGs: http://petercollingridge.appspot.com/svg_optimiser

9

Thanks again for the feedback Drew and Daniel. Yes, I know you can add classes and IDs to parent elements, but when I say “total inability to target it with CSS” I’m talking about referencing the SVG itself. So I think Drew understood my point.

One of the main needs I have to is to easily and quickly replace an icon that is referenced throughout a Hype document. Unfortunately I still don’t see an easy way to do this, while also exposing it to external CSS fill properties.

10

If you use a symbol, your element will updated wherever the symbol is used if you have it in multiple places.