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?
Solved
SVG scaling
+2Best answer by Micah
Hi
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!
+21- Lucid Legend Level 9
- 601 replies
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
Huma || Lucid Legend
1 person likes this
+2Humas1985 wrote:
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:
+2You 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>
1 person likes this
+2The important thing is that I’m importing the icon using drag-n-drop into a LucidSpark document.
1 person likes this
+20Hi
- 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?
+2Micah wrote:
Hi
- 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):
+20Hi
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!
1 person likes this
+20Glad to hear it! Let me know if there’s anything else I can do to support your work.
Reply
Create an account in the community
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to create an account.
Log in to the community
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to log in.
Log in with Lucid
or
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
