SVG vs Div Blocks Scaling

Design help General
1

Hey guys,

Is it the same if I export and SVG object from Figma, for example circle or create a circle DIV block within Webflow? Will these 2 objects scale the same without losing quality?

When creating a SVG object in Figma, for example its dimensions 100px x 100px, will such SVG file scale up without losing quality on large screens with the resolution of 3,000 px and higher? Or do I need initially to export a large SVG image from Figma to make sure it doesn’t lose quality?

Thank you

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @meetingingorkipark

If you export an object from Figma as an SVG and import it to Webflow you can scale it without losing quality.

As long as the element you export from figma is a vector object - you can export it as a SVG.

3

Hi Miguel, thanks for the answer. Sometimes I was noticing some blur even though those were vectors… Not sure why… :frowning:

4

I think maybe shadow effects don’t work with SVG?

5

do you notice that the text is blurred? here
https://preview.webflow.com/preview/timetrace999?utm_medium=preview_link&utm_source=designer&utm_content=timetrace999&preview=55d1d5d7eb52cb0ac4065c6d1b41ca5f&mode=preview

and on the computer and in Figma it looks not blurred. Please see the screenshot from Figma:

Screen Shot 2021-02-25 at 01.58.58
Screen Shot 2021-02-25 at 01.58.581632×656 47.8 KB

6

also the circle vectors seem to be blurred in Webflow…Screen Shot 2021-02-25 at 02.00.40

7

Yes I do see it’s becoming pixelated with those effects you have on them. It is possible to recreate all of this in Webflow. That would ensure that the images and effects have higher quality.