Transform SVG in one axis

Trying to ‘squash’ a rectangular SVG into a more square shape - but I can’t seem to transform the shape in one axis only.

Is this possible in Hype? Thanks

This depends on whether your SVG has been exported with a set width / height ratio. This tool might help you remove the width / height ratio from your SVG so that you can resize it on one axis: http://petercollingridge.appspot.com/svg-editor

This thread might also be helpful: Scale SVG in symbols or groups & Target with CSS

Ah, thanks Daniel!

I’ll have a look. They’ve been exported from Sketchapp - is there a way to turn off the fixing in there?

Damn, not having much luck with this. Can’t find any settings in Sketch, and any vector style I use has the same problem in Hype - PDF, EPS, SVG.

Tried running the SVG through the editor you suggest on ‘extreme’ but it doesn’t seem to make any difference. Can you confirm with the team that vectors are definitely scalable without fixed ratio?

I exported a simple rectangle from Sketch, and added this one property to allow it to be squashed in Hype:

preserveAspectRatio="none"

I added it within the svg section:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="123px" height="122px" preserveAspectRatio="none" viewBox="0 0 123 122" 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.3 (12072) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 1</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <rect id="Rectangle-1" stroke="#BB2D2D" fill="#D8D8D8" sketch:type="MSShapeGroup" x="0" y="0" width="123" height="122"></rect>
    </g>
</svg>

Found this tip on the 3rd answer here (the whole thread is worth a read).

Thanks Daniel I’ll give that a go.

Wow. That does it! Bit of a pain tho to go through and edit for every single SVG I want to stretch... Could we make this a feature request? Must be a way to override that bit.

I hope this isn’t too late, but you can use a text editor and do a Find -> Replace within a folder to add this property to a number of SVG files.

Find: <svg (with a space at the end)
Replace: <svg preserveAspectRatio="none"

Atom & Brackets are two free text editors that can help you do this.

1 Like

Thanks Daniel - I’ll keep it in mind for next time!