Solved

How can I scale SVGs while retaining quality?

15 replies
690 views
Translate All

Hello!

I’m importing an SVG icon from Azure pack and when upscaling it does react more like a bitmap, not a vector image. I’ve tried multiple different browsers, but result is the same. Is this fixable?

MicahAnswer

Lucid community team

Hi @Andrii Prokhorov, thanks for getting back to me with all of this detail - you’ve actually revealed what’s occurring. It’s only Lucidchart’s formal import tool that allows SVGs to retain their vector properties. Dragging and dropping an SVG file onto the canvas in both Lucidchart and Lucidspark will treat the file as a regular image file, which as you’ noted in your original post, doesn’t resize as you’re looking for. I apologize for any confusion or frustration this has caused!

As Lucidchart is the product designed for more robust documentation and diagramming, it is the only product that supports SVG import (as well as shape library management) - Lucidspark does not. One potential workaround here is to formally upload your SVGs into Lucidchart and add them to your canvas, then edit your document in Lucidspark. This should allow you to upscale the icons as true vectors while utilizing Lucidspark’s editing tools.

Give this a try, and let me know if it works for you!

Humas1985

Lucid Legend Level 10

Hi @Andrii Prokhorov

With an SVG icon losing quality when upscaled in Lucidchart likely comes from the SVG itself and might not be fixable within Lucidchart

Ideally, a clean, vector-only SVG will scale perfectly in Lucidchart

Kindly reach out to the Azure pack provider for a better SVG version

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

Translate

Huma || Lucid Legend

Andrii ProkhorovAuthor

Hi @Andrii Prokhorov

With an SVG icon losing quality when upscaled in Lucidchart likely comes from the SVG itself and might not be fixable within Lucidchart

Ideally, a clean, vector-only SVG will scale perfectly in Lucidchart

Kindly reach out to the Azure pack provider for a better SVG version

It’s definitely not the icon problem. Here how it looks in another diagramming tool:

Translate

Andrii ProkhorovAuthor

You can try yourself

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><defs><linearGradient id="a87938b3-0abc-4d3b-b8ce-d56133f1c044" x1="9" y1="17.329" x2="9" y2="0.671" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#005ba1" /><stop offset="0.15" stop-color="#0063af" /><stop offset="0.439" stop-color="#006fc3" /><stop offset="0.724" stop-color="#0076d0" /><stop offset="1" stop-color="#0078d4" /></linearGradient></defs><g id="bec9123e-1090-4dff-8677-bf27194fed19"><g><circle cx="9" cy="9" r="8.329" fill="url(#a87938b3-0abc-4d3b-b8ce-d56133f1c044)" /><g><path d="M6.6,4.138l2.3-2.3a.273.273,0,0,1,.387,0l2.3,2.3a.122.122,0,0,1-.086.209H10.086a.122.122,0,0,0-.122.123V7.343a.1.1,0,0,1-.1.1H8.321a.1.1,0,0,1-.1-.1V4.47A.122.122,0,0,0,8.1,4.347H6.687A.123.123,0,0,1,6.6,4.138Z" fill="#9cebff" /><path d="M11.586,13.862l-2.3,2.3a.273.273,0,0,1-.387,0l-2.3-2.3a.123.123,0,0,1,.087-.209H8.1a.122.122,0,0,0,.122-.123V10.657a.1.1,0,0,1,.1-.1H9.866a.1.1,0,0,1,.1.1V13.53a.122.122,0,0,0,.122.123H11.5A.122.122,0,0,1,11.586,13.862Z" fill="#9cebff" /><path d="M12.884,11.513l-2.3-2.3a.273.273,0,0,1,0-.387l2.3-2.3a.122.122,0,0,1,.209.086V8.027a.123.123,0,0,0,.122.123h2.874a.1.1,0,0,1,.1.1V9.792a.1.1,0,0,1-.1.1H13.215a.122.122,0,0,0-.122.122v1.414A.123.123,0,0,1,12.884,11.513Z" fill="#f2f2f2" /><path d="M5.116,6.527l2.3,2.3a.273.273,0,0,1,0,.387l-2.3,2.3a.123.123,0,0,1-.209-.087V10.012a.122.122,0,0,0-.122-.122H1.911a.1.1,0,0,1-.1-.1V8.247a.1.1,0,0,1,.1-.1H4.785a.123.123,0,0,0,.122-.123V6.613A.122.122,0,0,1,5.116,6.527Z" fill="#f2f2f2" /></g></g></g></svg>

Translate

Andrii ProkhorovAuthor

The important thing is that I’m importing the icon using drag-n-drop into a LucidSpark document.

Translate

Micah

Lucid community team

Hi @Andrii Prokhorov, jumping in with a few more questions.

You mentioned Lucidspark specifically - can you let me know if you experience this same issue when adding this SVG into Lucidchart?
Is this problem specific to this icon in particular, or do you experience this with any?

Translate

Andrii ProkhorovAuthor

Hi @Andrii Prokhorov, jumping in with a few more questions.

You mentioned Lucidspark specifically - can you let me know if you experience this same issue when adding this SVG into Lucidchart?
Is this problem specific to this icon in particular, or do you experience this with any?

Hi Micah,

Unfortunately, the same is for Lucidchart

However, if I’m importing the icon into a library and then use it - it works fine:

Different icon from different pack imported in Lucidspark document (dran-n-drop again):

Translate

MicahAnswer

Lucid community team

Hi @Andrii Prokhorov, thanks for getting back to me with all of this detail - you’ve actually revealed what’s occurring. It’s only Lucidchart’s formal import tool that allows SVGs to retain their vector properties. Dragging and dropping an SVG file onto the canvas in both Lucidchart and Lucidspark will treat the file as a regular image file, which as you’ noted in your original post, doesn’t resize as you’re looking for. I apologize for any confusion or frustration this has caused!

As Lucidchart is the product designed for more robust documentation and diagramming, it is the only product that supports SVG import (as well as shape library management) - Lucidspark does not. One potential workaround here is to formally upload your SVGs into Lucidchart and add them to your canvas, then edit your document in Lucidspark. This should allow you to upscale the icons as true vectors while utilizing Lucidspark’s editing tools.

Give this a try, and let me know if it works for you!

Translate

Andrii ProkhorovAuthor

Thank you, @Micah, for the detailed answer. This works!

Translate

Micah

Lucid community team

Glad to hear it! Let me know if there’s anything else I can do to support your work.

Translate

M

MCM

Like the OP, I’m importing the official Azure architecture SVG files, and have a follow-up question about the import process.

Following the instructions from @Micah’s post (thank you for that!) I am able to successfully import using the “formal import tool”. When doing so, however, the tool presents me with a choice:

If I uncheck the Rasterize SVG imports box, I get a nicely scalable vector shape in Lucidchart. But, as you can see from the text below the checkbox, the import tool specifically recommends in favor of rasterizing.

The problem I face is that the Microsoft SVG files render at a small size, by default. I don’t know the internals of the SVG format, but there must be some attribute that maps the vector coordinate space to physical page space, because these icons render tiny on my screen, no matter which SVG rendering tool I use (including Lucidchart).

So:

If I rasterize on import, I get a tiny shape that scales poorly when I resize it to match the other shapes in my diagram, but;
If I don’t rasterize, I get a nice scalable shape, albeit against the recommendations of the import tool

I don’t know if keeping the vector format on import is actually going to cause trouble for me later, or if it’s just a hypothetical possibility. Therefore, my question is:

QUESTION: What are the potential “rendering errors” cited by the import tool, and how likely are they to affect me if I import an SVG without rasterizing?

TIA

Translate

Show more replies

Create an account in the community

Log in to the community