When v4.3 SVGs are imported to Diagrams / Draw.io, they end up 1x1 and looses width to height ratio

[o-l-a-v]

When dragging a v4.3 SVG into Diagrams, or copy and paste it from Windows Explorer, the icon ends up with a size of 1x1, and thus looses the height to width ratio.

Why is this problematic? Because some of the icons aren't a perfect square, and does not have padding to make them have a correct width to height ratio when the dimensions are 1:1.

It does not happen with other SVGs, for instance with the ones from Microsoft:

• https://learn.microsoft.com/en-us/azure/architecture/icons/

Here is a Microsoft Azure v10 SVG which gets imported as 18x18.

• Microsoft also has padding so that non-square icons ends up with 18x18 (1:1) while looking correct. See the 10248-icon-service-Azure-Sentinel.svg icon for instance.
• Example of a non-symmetric icon of yours: Network Security Group.svg.

Click to view

<svg id="a6df9393-2bd7-4ac4-ba06-ab5f16ff5923" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
	<defs>
		<linearGradient id="fd591b35-0e01-4610-a025-8e017443b6ca" x1="3.96" y1="2.52" x2="3.96" y2="7.82" gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="#32d4f5"/>
			<stop offset="1" stop-color="#198ab3"/>
		</linearGradient>
		<linearGradient id="bded69e0-afb1-4c25-aa81-a799bd12553b" x1="14.04" y1="5.58" x2="14.04" y2="10.89" gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="#32d4f5"/>
			<stop offset="1" stop-color="#198ab3"/>
		</linearGradient>
		<linearGradient id="f25b6c72-365d-4ac2-a15c-1cace994f1e6" x1="5.29" y1="10.18" x2="5.29" y2="15.48" gradientUnits="userSpaceOnUse">
			<stop offset="0" stop-color="#32d4f5"/>
			<stop offset="1" stop-color="#198ab3"/>
		</linearGradient>
	</defs>
	<title>Icon-analytics-148</title>
	<rect x="0.5" y="2.52" width="6.92" height="5.31" rx="0.28" fill="url(#fd591b35-0e01-4610-a025-8e017443b6ca)"/>
	<rect x="10.58" y="5.58" width="6.92" height="5.31" rx="0.28" fill="url(#bded69e0-afb1-4c25-aa81-a799bd12553b)"/>
	<rect x="1.82" y="10.18" width="6.92" height="5.31" rx="0.42" fill="url(#f25b6c72-365d-4ac2-a15c-1cace994f1e6)"/>
	<path d="M13.15,8.92l.23-.64L4.82,5.13l-.23.63Zm.53-.09-.32-.6L5.29,12.48l.31.6ZM5,13.37l.67-.12L4.31,5.54l-.67.12Z" fill="#773adc"/>
	<circle cx="14.04" cy="8.23" r="1.08" transform="translate(-2.23 8.81) rotate(-32.41)" fill="#fff"/>
	<circle cx="3.96" cy="5.17" r="1.08" transform="translate(-2.15 2.93) rotate(-32.41)" fill="#fff"/>
	<circle cx="5.29" cy="12.83" r="1.08" transform="translate(-6.05 4.83) rotate(-32.41)" fill="#fff"/>
</svg>

Here is one from your v4.3 which gets imported as 1x1.

Click to view

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by Microsoft Visio, SVG Export Apache Spark Scale Setting.svg Page-1 -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="0.78735679in"
   height="0.78735679in"
   viewBox="0 0 56.689597 56.69"
   xml:space="preserve"
   class="st2"
   version="1.1"
   id="svg16"
   sodipodi:docname="Apache Spark Scale Setting.svg"
   style="font-size:12px;overflow:visible;color-interpolation-filters:sRGB;fill:none;fill-rule:evenodd;stroke-linecap:square;stroke-miterlimit:3"
   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
   id="metadata22"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
   id="defs20" /><sodipodi:namedview
   pagecolor="#ffffff"
   bordercolor="#666666"
   borderopacity="1"
   objecttolerance="10"
   gridtolerance="10"
   guidetolerance="10"
   inkscape:pageopacity="0"
   inkscape:pageshadow="2"
   inkscape:window-width="640"
   inkscape:window-height="480"
   id="namedview18"
   showgrid="false"
   inkscape:zoom="1.4193119"
   inkscape:cx="37.795128"
   inkscape:cy="37.786193"
   inkscape:window-x="0"
   inkscape:window-y="0"
   inkscape:window-maximized="0"
   inkscape:current-layer="svg16" />
	<style
   type="text/css"
   id="style2">
	<![CDATA[
		.st1 {fill:#0078d4;stroke:none;stroke-linecap:butt;stroke-width:34}
		.st2 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
	]]>
	</style>

	<g
   id="g14"
   transform="translate(-34.000441,-34.0043)">
		<title
   id="title4">Page-1</title>
		<g
   id="group19824-1"
   transform="translate(34,-34.0157)">
			<title
   id="title6">Apache Spark Scale Setting.19824</title>
			<g
   id="shape19825-2">
				<title
   id="title8">path6</title>
				<path
   d="m 31.89,105.22 v 15.95 H 3.54 V 92.82 H 19.4 l 3.49,-3.54 H 0 v 35.43 h 35.43 v -22.89 z m 3.54,-37.2 h -7.08 v 3.54 h 7.08 z m 10.63,0 h -7.08 v 3.54 h 7.08 z M 3.54,78.65 H 0 v 7.08 h 3.54 z m 0,-10.63 H 0 v 7.08 h 3.54 z m 21.26,0 h -7.08 v 3.54 h 7.08 z m -10.63,0 H 7.09 v 3.54 h 7.08 z m 42.52,31.89 h -3.54 v 7.08 h 3.54 z m 0,10.63 h -3.54 v 7.08 h 3.54 z m 0,-21.26 h -3.54 v 7.08 h 3.54 z m 0,-10.63 h -3.54 v 7.08 h 3.54 z m 0,-10.63 h -7.08 v 3.54 h 3.54 v 3.54 h 3.54 z m -10.63,53.15 h -7.08 v 3.54 h 7.08 z m 10.63,0 h -7.08 v 3.54 h 7.08 z"
   class="st1"
   id="path10"
   inkscape:connector-curvature="0"
   style="fill:#0078d4;stroke:none;stroke-width:34;stroke-linecap:butt" />
			</g>
		</g>
	</g>
</svg>

[David-Summers]

So this was a tricky one, but I might have a solution. The issue was that my builder script imports my gold master SVG collection into Visio, adds the connection points, shape data etc then exports the object out to a new SVG. This allows me to ensure that all of the icons are relative in size while maintaining the aspect ratio.

Unfortunately when visio exports the SVG it does not export the icon size correctly

width="0.7086646in"
height="0.78738207in"
viewBox="0 0 51.023529 56.691563"

I just build a post processor that scrapes the SVG and uses the view box values for width and height and that seems to play nice with Draw.IO. Attached a few examples for you to test. It's a bit clunky so looking into a better solution

[David-Summers]

Hi @o-l-a-v

Resolved in version 4.4 which just released. I have tested all of the icons in draw io and office and the scaling looks fine to me. Was a fun issue to tackle :D

[o-l-a-v]

Great work, and thanks. :)

I don't work with disgrams every day. I'll be sure to give some feedback once I've tested the new version of the icons.