SVG and dynamic resizing – vuejs

It helps to ensure the SVG files are created or exported nicely from whatever program (Figma, Illustrator, etc) to ensure there’s no excess whitespace from the artboard included in the SVG. The SVG code provided looks like the SVG was placed on an artboard which was much larger than the graphic itself.

Beyond that, I manually experimented with the viewBox numbers to get a decent result (correct exporting avoids this manual work). Once the viewBox attributes are correctly set, you can apply other manipulations via classes or inline css to achieve your desired result.

<svg viewbox="0 0 12 11" xmlns="http://www.w3.org/2000/svg">
    <path d="M.75 10.5A.749.749 0 010 9.75v-7.5a.749.749 0 01.75-.75h6a.749.749 0 01.75.75.75.75 0 01-.75.75H1.5v6h6V6.75A.75.75 0 018.25 6a.75.75 0 01.75.75v3a.75.75 0 01-.75.75zm3.97-3.22a.75.75 0 010-1.06l4.5-4.5a.727.727 0 01.08-.053L8.379.746A.437.437 0 018.687 0h2.876A.437.437 0 0112 .437v2.876a.436.436 0 01-.745.308l-.921-.921a.588.588 0 01-.053.08l-4.5 4.5a.749.749 0 01-.531.22.749.749 0 01-.531-.22z"/>
</svg>

I would recommend using class or style binding for hooking up any css styles in Vue, the docs cover this here: https://vuejs.org/v2/guide/class-and-style.html

Demo with plain SVG and Vue versions: https://codepen.io/nikcornish/pen/OJXoWvj

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top