Select to view content in your preferred language

Improve loading of svg files into layout

1309
4
10-16-2023 12:07 AM
Status: Implemented
Labels (1)
JLezik
by
Occasional Contributor

When loading svg file into layout of ArcGIS Pro project (as Picture element), there are several issues.

If the svg contains Pattern fill or the tag <tspan>, then it's corrupted, as can be seen on the attached image. 

ArcGIS_svgIssues.JPG

 The svg shown on images above:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.38443mm"
   height="70.102646mm"
   viewBox="0 0 93.38443 70.102646"
   version="1.1"
   id="svg145500"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs145497">
    <pattern
       xlink:href="#Strips1_2"
       id="pattern149774"
       patternTransform="matrix(0.22637023,0.2526204,-0.8229625,0.73744716,144.72458,115.15042)" />
    <pattern
       patternUnits="userSpaceOnUse"
       width="3"
       height="1"
       patternTransform="translate(0,0) scale(10,10)"
       id="Strips1_2">
      <rect
         style="fill:black;stroke:none"
         x="0"
         y="-0.5"
         width="1"
         height="2"
         id="rect147676" />
    </pattern>
    <pattern
       xlink:href="#pattern149750"
       id="pattern149768"
       patternTransform="matrix(0.18800209,0,0,0.18800209,146.61227,98.475632)" />
    <pattern
       xlink:href="#pattern148811"
       id="pattern149559"
       patternTransform="matrix(0.2379164,0,0,0.2379164,158.06994,121.31429)" />
    <pattern
       patternUnits="userSpaceOnUse"
       width="53.685843"
       height="27.83631"
       patternTransform="translate(667.96883,581.60972)"
       id="pattern148811">
      <circle
         id="path148779"
         style="fill:#000000;stroke:none;stroke-width:1.00157;stroke-dasharray:none"
         cx="21.120314"
         cy="12.945216"
         r="1.5" />
      <circle
         id="path148781"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="31.822323"
         cy="24.836346"
         r="1.5" />
      <circle
         id="path148783"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="29.072454"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148785"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="33.322289"
         cy="14.445182"
         r="1.5" />
      <circle
         id="path148787"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="36.578739"
         cy="4.0268555"
         r="1.5" />
      <circle
         id="path148789"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="39.402889"
         cy="14.445124"
         r="1.5" />
      <circle
         id="path148791"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="5.5268784"
         r="1.5" />
      <circle
         id="path148793"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148795"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="41.929745"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148797"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215221"
         cy="23.336323"
         r="1.5" />
      <circle
         id="path148799"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215162"
         cy="15.945148"
         r="1.5" />
      <circle
         id="path148801"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="1.5"
         cy="11.445193"
         r="1.5" />
      <circle
         id="path148803"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="7.1482992"
         cy="1.5"
         r="1.5" />
      <circle
         id="path148805"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="13.093835"
         cy="8.3374176"
         r="1.5" />
      <circle
         id="path148807"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="3.0000231"
         r="1.5" />
      <circle
         id="path148809"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="26.336311"
         r="1.5" />
    </pattern>
    <pattern
       patternUnits="userSpaceOnUse"
       width="53.685843"
       height="27.83631"
       patternTransform="translate(667.96883,581.60972)"
       id="pattern148811-9">
      <circle
         id="path148779-0"
         style="fill:#000000;stroke:none;stroke-width:1.00157;stroke-dasharray:none"
         cx="21.120314"
         cy="12.945216"
         r="1.5" />
      <circle
         id="path148781-7"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="31.822323"
         cy="24.836346"
         r="1.5" />
      <circle
         id="path148783-5"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="29.072454"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148785-4"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="33.322289"
         cy="14.445182"
         r="1.5" />
      <circle
         id="path148787-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="36.578739"
         cy="4.0268555"
         r="1.5" />
      <circle
         id="path148789-4"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="39.402889"
         cy="14.445124"
         r="1.5" />
      <circle
         id="path148791-0"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="5.5268784"
         r="1.5" />
      <circle
         id="path148793-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148795-9"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="41.929745"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148797-3"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215221"
         cy="23.336323"
         r="1.5" />
      <circle
         id="path148799-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215162"
         cy="15.945148"
         r="1.5" />
      <circle
         id="path148801-9"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="1.5"
         cy="11.445193"
         r="1.5" />
      <circle
         id="path148803-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="7.1482992"
         cy="1.5"
         r="1.5" />
      <circle
         id="path148805-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="13.093835"
         cy="8.3374176"
         r="1.5" />
      <circle
         id="path148807-7"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="3.0000231"
         r="1.5" />
      <circle
         id="path148809-7"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="26.336311"
         r="1.5" />
    </pattern>
    <pattern
       patternUnits="userSpaceOnUse"
       width="53.685843"
       height="27.83631"
       patternTransform="translate(667.96883,581.60972)"
       id="pattern148811-97">
      <circle
         id="path148779-2"
         style="fill:#000000;stroke:none;stroke-width:1.00157;stroke-dasharray:none"
         cx="21.120314"
         cy="12.945216"
         r="1.5" />
      <circle
         id="path148781-2"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="31.822323"
         cy="24.836346"
         r="1.5" />
      <circle
         id="path148783-2"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="29.072454"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148785-2"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="33.322289"
         cy="14.445182"
         r="1.5" />
      <circle
         id="path148787-1"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="36.578739"
         cy="4.0268555"
         r="1.5" />
      <circle
         id="path148789-3"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="39.402889"
         cy="14.445124"
         r="1.5" />
      <circle
         id="path148791-5"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="5.5268784"
         r="1.5" />
      <circle
         id="path148793-7"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="52.185844"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148795-90"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="41.929745"
         cy="20.525784"
         r="1.5" />
      <circle
         id="path148797-8"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215221"
         cy="23.336323"
         r="1.5" />
      <circle
         id="path148799-5"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="16.215162"
         cy="15.945148"
         r="1.5" />
      <circle
         id="path148801-1"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="1.5"
         cy="11.445193"
         r="1.5" />
      <circle
         id="path148803-5"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="7.1482992"
         cy="1.5"
         r="1.5" />
      <circle
         id="path148805-86"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="13.093835"
         cy="8.3374176"
         r="1.5" />
      <circle
         id="path148807-3"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="3.0000231"
         r="1.5" />
      <circle
         id="path148809-9"
         style="fill:#000000;stroke:none;stroke-width:0.999999"
         cx="22.620279"
         cy="26.336311"
         r="1.5" />
    </pattern>
    <pattern
       patternUnits="userSpaceOnUse"
       width="37.446056"
       height="30.45004"
       patternTransform="translate(663.093,571.72407)"
       id="pattern149750">
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 5.785375,16.43486 6.726614,7.567446"
         id="path149722" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 16.037343,20.218583 3.567345,-4.115906"
         id="path149724" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 12.885671,14.507074 V 8.1156286"
         id="path149726" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 19.982528,9.8992633 26.73934,6.1833074"
         id="path149728" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 28.968921,18.16063 7.877859,7.345701"
         id="path149730" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 36.103573,17.794923 -0.445908,-2.019742 -0.198803,0.04384"
         id="path149732" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 30.009388,15.179263 32.907832,8.0412853"
         id="path149734" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 23.360934,20.546041 -1.526665,8.527635"
         id="path149736" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 12.885671,29.161777 4.2948805,27.290003"
         id="path149738" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 1.7680395,22.97949 0.87618442,11.311333"
         id="path149740" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 6.8217592,11.273235 9.1486632,5.7451845"
         id="path149742" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 12.385677,0.83232784 23.360934,4.5482837"
         id="path149744" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="m 26.980285,25.872 8.296895,3.778318"
         id="path149746" />
      <path
         style="fill:none;stroke:#000000;stroke-width:1.75748;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
         d="M 25.252966,16.540989 24.658408,13.466608"
         id="path149748" />
    </pattern>
  </defs>
  <g
     id="layer1"
     transform="translate(-34.227412,-86.337962)">
    <rect
       style="fill:none;stroke:#000000;stroke-width:0.0605329;stroke-dasharray:none;stroke-opacity:1"
       id="rect146451"
       width="74.100121"
       height="45.866783"
       x="43.869568"
       y="98.455894" />
    <text
       xml:space="preserve"
       style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;text-anchor:middle;stroke-width:0.264583;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal"
       x="80.876907"
       y="109.95812"
       id="text146507"><tspan
         id="tspan146505"
         x="80.876907"
         y="109.95812"
         style="font-size:5.64444007px;stroke-width:0.264583;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal">LEGEND</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:4.23333px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Condensed';text-align:center;text-anchor:middle;stroke-width:0.264583;font-weight:normal;font-style:normal;font-stretch:condensed;font-variant:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal"
       x="61.507942"
       y="121.28548"
       id="text146561"><tspan
         id="tspan146559"
         x="61.507942"
         y="121.28548">Legend Item 01</tspan><tspan
         id="tspan146607"
         x="61.507942"
         y="128.54297">Legend Item 02</tspan><tspan
         id="tspan146609"
         x="61.53688"
         y="135.80046">Legend Item 03</tspan></text>
    <path
       style="fill:none;stroke:#000000;stroke-width:0.15;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
       d="M 74.908002,121.38929 H 95.515525"
       id="path146674" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.15;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
       d="M 74.908,128.64678 H 95.515525"
       id="path146676" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.15;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
       d="M 74.908,135.90427 H 95.515525"
       id="path146678" />
    <rect
       style="fill:url(#pattern149559);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-dasharray:none;stroke-opacity:1"
       id="rect146680"
       width="10.067796"
       height="4.7906046"
       x="98.632942"
       y="131.03867" />
    <rect
       style="fill:url(#pattern149768);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-dasharray:none;stroke-opacity:1"
       id="rect146680-6"
       width="10.067796"
       height="4.7906046"
       x="98.632942"
       y="123.73118" />
    <rect
       style="fill:url(#pattern149774);fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-dasharray:none;stroke-opacity:1"
       id="rect146680-4"
       width="10.067796"
       height="4.7906046"
       x="98.632942"
       y="116.42369" />
    <rect
       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.1;stroke-dasharray:none;stroke-opacity:1"
       id="rect149776"
       width="93.284431"
       height="70.002647"
       x="34.277412"
       y="86.387962" />
  </g>
</svg>

 

Jakub

Tags (3)
4 Comments
Leesa
by Esri Contributor

Hi Jakub,

Our team is taking a look at this. Thanks for reporting it!

JeremyWright
Status changed to: In Product Plan
 
WarrenMedernach

I would also like to add that it does not honor super script text on v3.4.0.

I have the following SVG 

WarrenMedernach_0-1737647233512.png

But when inserted into a layout, this is the result:

WarrenMedernach_1-1737647295714.png

SVG:

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
	<!-- Title -->
	<text x="10" y="20" font-family="sans-serif" font-size="16" font-weight="bold"> 2023 Avg Dissolved D-Ni/SO4 (mg/mg) </text>
	<!-- First column -->
	<!-- Light Green (≤ 1) -->
	<circle cx="25" cy="50" r="10" fill="#ccffcc" stroke="#000" stroke-width="1"/>
	<text x="45" y="55" font-family="sans-serif" font-size="14"> ≤ 1 x 10<tspan baseline-shift="super" font-size="70%">-6</tspan>
	</text>
	<!-- Green (≤ 5) -->
	<circle cx="25" cy="80" r="10" fill="#66cc66" stroke="#000" stroke-width="1"/>
	<text x="45" y="85" font-family="sans-serif" font-size="14"> 1 x 10<tspan baseline-shift="super" font-size="70%">-6</tspan> to ≤ 1 x 10<tspan baseline-shift="super" font-size="70%">-5</tspan>
	</text>
	<!-- Yellow (≤ 20) -->
	<circle cx="25" cy="110" r="10" fill="#ffff99" stroke="#000" stroke-width="1"/>
	<text x="45" y="115" font-family="sans-serif" font-size="14"> 1 x 10<tspan baseline-shift="super" font-size="70%">-5</tspan> to ≤ 5 x 10<tspan baseline-shift="super" font-size="70%">-5</tspan>
	</text>
	<!-- Gold/Orange (≤ 40) -->
	<circle cx="25" cy="140" r="10" fill="#ffc94d" stroke="#000" stroke-width="1"/>
	<text x="45" y="145" font-family="sans-serif" font-size="14"> 5 x 10<tspan baseline-shift="super" font-size="70%">-5</tspan> to ≤ 1 x 10<tspan baseline-shift="super" font-size="70%">-4</tspan>
	</text>
	<!-- Purple (60 to 170) -->
	<circle cx="25" cy="170" r="10" fill="#AC76D0" stroke="#000" stroke-width="1"/>
	<text x="45" y="175" font-family="sans-serif" font-size="14"> ≥ 1 x 10<tspan baseline-shift="super" font-size="70%">-4</tspan>
	</text>

</svg>

 

 

AubriKinghorn
Status changed to: Implemented

This is available in ArcGIS Pro 3.5.