This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Luis Escobar
Posted Oct 03 - Read on Facebook

Hi guys, I'm a total noob in Framer.js and code in general, but I'd like to take my prototypes to the next level so I'm jumping in!

I'm having some trouble with SVGs and I would really appreciate some help. In short, I have a heart shape SVG I created in Sketch and I'd like to scale that heart from small to large while adjusting the border weight in both states. I can get everything to work properly, but the SVG looks horrible when it's scaled up.

I've seen some posts about D3 and SnapSVG, but with no specific direction Im completely lost. I've tried creating the path with a few methods using HTML but they all look bad when scaled. Can someone please provide some direction?



Jordan Robert Dobson

Start at the largest size and go downwards.

Scaling up from smallest won't work because when the hardware accelerated graphics kick in (like using scale) they take any vector graphics and rasterize them for the scale transforms.

So start at the largest size and scale down as the quality will still be good when going downwards.

Luis Escobar

I thought the same, but the scaled down version also looks bad. Probably because the difference in size is so drastic. 50pt to almost screen width.

Luis Escobar

I also tried this with a graphic which looks better, but cannot provide a changing border weight.

Read the entire post on Facebook