Improve loading of svg files into layout
1313
4
10-16-2023 12:07 AM
by
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.
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
4 Comments
I would also like to add that it does not honor super script text on v3.4.0.
I have the following SVG
But when inserted into a layout, this is the result:
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>
