How can I scale SVGs while retaining quality?

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

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

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>

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

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

1. You mentioned Lucidspark specifically - can you let me know if you experience this same issue when adding this SVG into Lucidchart?
2. 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):

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

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

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

Hi Tia (​@MCM),

Thank you for posting in this thread!

That warning/pop-up is really just a safety net for super complex designs, like intricate illustrations with custom fonts or layered paths that could slow things down. Since Azure icons are built specifically for clean cloud diagramming, they use simple geometric paths that Lucid handles really well!

Keeping them as vectors means you're not locking that tiny file size into a low-resolution pixel grid, so you can scale them up as much as you need without losing quality. If the icon looks crisp and correct on your canvas after importing it unrasterized, you're totally good to go!

Please check out this Lucid Help Center Article on importing SVGs in Lucid. Let me know if you have additional questions!

​@alison cheney thank you for your prompt and clear reply. This is what I needed to know.

In the spirit of no good deed going unpunished, I’ll ask one more question. The existing solution meets my requirements; this is just a nice-to-have feature, if there’s a way:

• When rasterizing an SVG on import, is there a way to control the output resolution of the resulting shape?

Using the Microsoft Foundry icon, for example, I find that, at an appropriate scale, the rasterized version actually looks better than the native vector version. I don’t know how well this will come through, but below is a screenshot showing the same SVG file imported to a Lucidchart vector shape (left) and raster shape (right):

You may be able to see in the vector shape 1) coarsely-splined curves, and 2) white artifacts where the surfaces overlap.

By contrast, the raster shape is smoother and nicer looking (IMHO), but for the low resolution. If I could rasterize at a higher resolution, I think the right-hand copy would be the winner.

Again, both existing options are functional for what I’m doing at the moment; I’m just asking if I’ve missed anything, while we’re on the subject. Thanks!

I found a workaround that allows controlling the import rasterization resolution: Edit the SVG file.

I’ve learned that:

• SVG files are text files in XML format (at least the Azure ones are)
• Two attributes of the <SVG> tag, width and height, control the resolution of the rasterized Lucidchart shape during import (and, generally, the display behavior of the SVG file in other apps)
• The default size is set to 18 pixels
• Changing the size to 120 pixels matches the other Lucidchart icons I’m using

For example, here’s the opening tag for one of the SVG Azure icons from Microsoft:

<svg
  id="ed8fbe5c-618b-47ce-8d68-3dbd1e10f81a"
  xmlns="http://www.w3.org/2000/svg"
  width="18"
  height="18"
  viewBox="0 0 18 18"
>

Observe the width and height attributes on lines 4 and 5. These control the display size. If we change them, we can make the icon display at a different size - and tell Lucidchart what resolution to use during import

CAUTION: From some quick reading, it appears that the viewBox value defines the vector coordinate space and, in turn, changing it can mess things up. I haven’t researched in more detail than that, just be forewarned.

The built-in Lucidchart shapes I’m using in my diagram are 120x120 pixels. So, if I update the width / height values from “18” to “120”:

<svg
  id="ed8fbe5c-618b-47ce-8d68-3dbd1e10f81a"
  xmlns="http://www.w3.org/2000/svg"
  width="120"
  height="120"
  viewBox="0 0 18 18"
>

Here’s the results (with the “edited” copy set to 800x800 instead of 120x120, to emphasize the effect):

It’d still be nice to be able to control this in Lucidchart on import, but this will work for me. It’s easy enough to automate editing my library of SVG files with Python or sed or something.

HTH

Hi ​@MCM, thanks for providing such a detailed workaround here for others who may come across this post, this is fantastic! 

I’m jumping in for Alison while she’s out of office, and I’m happy to help dig in here. I’m checking in with our product team on this one for any other solutions or workarounds here that may work for you. 

I’ll get back to you as soon as possible in this thread!

Hi ​@MCM, thanks for your patience as I look into this a bit more! 

Are you hoping to edit/control the resolution of SVG files upon import and after selecting ‘Rasterize SVG Imports’? 

If yes, I certainly see what you’re saying with the screenshot you’ve provided, thank you for that example. I could understand how having this available upon import would be helpful. 

Unfortunately at this time, you’re absolutely right that the workaround you provided is the existing solution. This would be a great feature request to share in the Product Feedback space of this community! If you’d like to share this idea with other users and with our product team, you can create an idea with details about what you’d like to see. We’re very interested in your feedback and committed to continually improving our products. 

For more information on how Lucid manages feedback via this community, take a look at this post: