I have AWS's resource icons in SVG format. An example is given below:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark</title>
<g id="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M10.298,22.955 L8.298,22.969 C8.333,27.982 10.654,32.573 14.668,35.564 C17.503,37.677 20.819,38.696 24.109,38.696 C28.942,38.696 33.717,36.496 36.82,32.332 C42.036,25.334 40.587,15.396 33.589,10.18 C26.813,5.13 17.297,6.345 11.963,12.775 L12,10.014 L10,9.987 L9.933,14.987 C9.929,15.252 10.031,15.508 10.216,15.698 C10.402,15.888 10.654,15.997 10.919,16 L15.986,16.068 L16.014,14.068 L13.513,14.035 C18.176,8.43 26.479,7.376 32.394,11.783 C38.507,16.341 39.774,25.023 35.217,31.137 C30.658,37.251 21.979,38.517 15.863,33.96 C12.357,31.347 10.328,27.335 10.298,22.955 L10.298,22.955 Z M24,19 C21.794,19 20,20.795 20,23 C20,25.206 21.794,27 24,27 C26.206,27 28,25.206 28,23 C28,20.795 26.206,19 24,19 L24,19 Z M16.946,28.78 L19.175,26.552 C18.441,25.556 18,24.33 18,23 C18,21.622 18.473,20.353 19.257,19.339 L16.947,17.191 L18.309,15.727 L20.729,17.977 C21.671,17.362 22.793,17 24,17 C25.342,17 26.577,17.448 27.577,18.195 L29.982,15.726 L31.414,17.121 L28.965,19.636 C29.617,20.597 30,21.754 30,23 C30,24.252 29.613,25.415 28.955,26.377 L31.414,28.756 L30.024,30.194 L27.565,27.815 C26.567,28.556 25.336,29 24,29 C22.742,29 21.574,28.61 20.61,27.946 L18.361,30.194 L16.946,28.78 Z M35,44 L39,44 L39,43 L35,43 L35,44 Z M9,44 L13,44 L13,43 L9,43 L9,44 Z M46,3 L46,42 C46,42.553 45.553,43 45,43 L41,43 L41,45 C41,45.553 40.553,46 40,46 L34,46 C33.447,46 33,45.553 33,45 L33,43 L15,43 L15,45 C15,45.553 14.553,46 14,46 L8,46 C7.447,46 7,45.553 7,45 L7,43 L3,43 C2.447,43 2,42.553 2,42 L2,33 L4,33 L4,41 L44,41 L44,4 L4,4 L4,11 L2,11 L2,3 C2,2.448 2.447,2 3,2 L45,2 C45.553,2 46,2.448 46,3 L46,3 Z M2,27 L4,27 L4,17 L2,17 L2,27 Z" id="Fill-1" fill="#6CAE3E"></path>
</g>
</svg>
Draw.io (diagrams.net) retrieves their icon images from xml file(s) containing hundreds of shape tags. One of which is given below:
full xml file source: https://github.com/jgraph/drawio/blob/dev/src/main/webapp/stencils/aws4.xml
<shape aspect="fixed" h="47.651" name="backup" strokewidth="inherit" w="49.458">
<connections/>
<foreground>
<path>
<move x="24.731" y="0.045"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="21.02" x-axis-rotation="0" y="5.006"/>
<line x="6.458" y="15.131"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="1" x="6.456" x-axis-rotation="0" y="15.129"/>
<arc large-arc-flag="1" rx="4" ry="4" sweep-flag="0" x="4.337" x-axis-rotation="0" y="22.522"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="4.358" x-axis-rotation="0" y="22.522"/>
<line x="9.964" y="40.742"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="12.708" x-axis-rotation="0" y="47.651"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="16.589" x-axis-rotation="0" y="44.6"/>
<line x="33.206" y="44.6"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="37.087" x-axis-rotation="0" y="47.651"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.087" x-axis-rotation="0" y="43.651"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="39.749" x-axis-rotation="0" y="40.668"/>
<line x="45.235" y="22.51"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="45.458" x-axis-rotation="0" y="22.522"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="49.458" x-axis-rotation="0" y="18.522"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.36" x-axis-rotation="0" y="15.117"/>
<line x="28.796" y="4.922"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="28.897" x-axis-rotation="0" y="4.041"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="24.731" x-axis-rotation="0" y="0.045"/>
<close/>
<move x="24.897" y="1.951"/>
<arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="26.958" x-axis-rotation="0" y="4.01"/>
<arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="24.897" x-axis-rotation="0" y="1.951"/>
<close/>
<move x="27.88" y="6.7"/>
<line x="41.973" y="16.563"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.538" x-axis-rotation="0" y="19.295"/>
<line x="36.692" y="21.373"/>
<line x="37.472" y="23.194"/>
<line x="42.391" y="21.084"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.343" x-axis-rotation="0" y="21.91"/>
<line x="37.952" y="39.75"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="35.774" x-axis-rotation="0" y="39.873"/>
<line x="33.337" y="36.215"/>
<line x="31.69" y="37.313"/>
<line x="34.126" y="40.965"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="33.227" x-axis-rotation="0" y="42.621"/>
<line x="16.567" y="42.621"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="15.665" x-axis-rotation="0" y="40.961"/>
<line x="18.097" y="37.313"/>
<line x="16.448" y="36.215"/>
<line x="14.009" y="39.873"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="11.737" x-axis-rotation="0" y="39.772"/>
<line x="6.274" y="22.016"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.405" x-axis-rotation="0" y="21.086"/>
<line x="12.319" y="23.194"/>
<line x="13.1" y="21.373"/>
<line x="8.259" y="19.297"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="8.337" x-axis-rotation="0" y="18.522"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.835" x-axis-rotation="0" y="16.582"/>
<line x="21.966" y="6.758"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="23.907" x-axis-rotation="0" y="7.91"/>
<line x="23.907" y="12.381"/>
<line x="25.888" y="12.381"/>
<line x="25.888" y="7.912"/>
<arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="27.88" x-axis-rotation="0" y="6.7"/>
<close/>
<move x="24.593" y="15.366"/>
<arc large-arc-flag="0" rx="10.24" ry="10.24" sweep-flag="0" x="17.807" x-axis-rotation="0" y="18.246"/>
<line x="17.698" y="16.701"/>
<line x="15.698" y="16.84"/>
<line x="15.977" y="20.641"/>
<arc large-arc-flag="0" rx="1" ry="1" sweep-flag="0" x="16.977" x-axis-rotation="0" y="21.551"/>
<line x="17.048" y="21.59"/>
<line x="20.847" y="21.311"/>
<line x="20.698" y="19.311"/>
<line x="19.497" y="19.393"/>
<arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="29.837" x-axis-rotation="0" y="18.991"/>
<arc large-arc-flag="0" rx="8.25" ry="8.25" sweep-flag="1" x="31.528" x-axis-rotation="0" y="30.541"/>
<arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="19.977" x-axis-rotation="0" y="32.231"/>
<arc large-arc-flag="0" rx="8.15" ry="8.15" sweep-flag="1" x="16.657" x-axis-rotation="0" y="25.66"/>
<line x="14.657" y="25.66"/>
<arc large-arc-flag="0" rx="10.22" ry="10.22" sweep-flag="0" x="24.887" x-axis-rotation="0" y="35.82"/>
<line x="24.897" y="35.84"/>
<arc large-arc-flag="1" rx="10.24" ry="10.24" sweep-flag="0" x="24.593" x-axis-rotation="0" y="15.366"/>
<close/>
<move x="4.337" y="16.42"/>
<arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="6.337" x-axis-rotation="0" y="18.481"/>
<arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="4.337" x-axis-rotation="0" y="16.42"/>
<close/>
<move x="45.458" y="16.42"/>
<arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="47.516" x-axis-rotation="0" y="18.481"/>
<arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="45.458" x-axis-rotation="0" y="16.42"/>
<close/>
<move x="12.708" y="41.561"/>
<arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="14.766" x-axis-rotation="0" y="43.561"/>
<arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="12.708" x-axis-rotation="0" y="41.561"/>
<close/>
<move x="37.087" y="41.561"/>
<arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="39.138" x-axis-rotation="0" y="43.561"/>
<arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="37.087" x-axis-rotation="0" y="41.561"/>
<close/>
</path>
<fill/>
</foreground>
</shape>
Not sure if the above one is SVG or not. However both of them seem to have the path tag. Is there any way to convert the first one to the format of second one?
Thanks.
Converting from one XML format to another can be done using XSLT. Basically you create a "stylesheet" for the transformation and you then use an application like xsltproc or SAXON XSLT processor to transform (tutorial: XSLT processing with xsltproc).
You can read more about XSL (XPath etc.) here: XSLT Introduction.
In this example I will use the Saxon processor, because I need some of the functions in XSLT 2.0 (XPath, XQuery, and XSLT Function Reference). The demanding part is to convert the value of the d attribute of the <path> into elements.
From the example given I have the following SVG, XSL and XML document.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark</title>
<g id="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M10.298,22.955 L8.298,22.969 C8.333,27.982 10.654,32.573 14.668,35.564 C17.503,37.677 20.819,38.696 24.109,38.696 C28.942,38.696 33.717,36.496 36.82,32.332 C42.036,25.334 40.587,15.396 33.589,10.18 C26.813,5.13 17.297,6.345 11.963,12.775 L12,10.014 L10,9.987 L9.933,14.987 C9.929,15.252 10.031,15.508 10.216,15.698 C10.402,15.888 10.654,15.997 10.919,16 L15.986,16.068 L16.014,14.068 L13.513,14.035 C18.176,8.43 26.479,7.376 32.394,11.783 C38.507,16.341 39.774,25.023 35.217,31.137 C30.658,37.251 21.979,38.517 15.863,33.96 C12.357,31.347 10.328,27.335 10.298,22.955 L10.298,22.955 Z M24,19 C21.794,19 20,20.795 20,23 C20,25.206 21.794,27 24,27 C26.206,27 28,25.206 28,23 C28,20.795 26.206,19 24,19 L24,19 Z M16.946,28.78 L19.175,26.552 C18.441,25.556 18,24.33 18,23 C18,21.622 18.473,20.353 19.257,19.339 L16.947,17.191 L18.309,15.727 L20.729,17.977 C21.671,17.362 22.793,17 24,17 C25.342,17 26.577,17.448 27.577,18.195 L29.982,15.726 L31.414,17.121 L28.965,19.636 C29.617,20.597 30,21.754 30,23 C30,24.252 29.613,25.415 28.955,26.377 L31.414,28.756 L30.024,30.194 L27.565,27.815 C26.567,28.556 25.336,29 24,29 C22.742,29 21.574,28.61 20.61,27.946 L18.361,30.194 L16.946,28.78 Z M35,44 L39,44 L39,43 L35,43 L35,44 Z M9,44 L13,44 L13,43 L9,43 L9,44 Z M46,3 L46,42 C46,42.553 45.553,43 45,43 L41,43 L41,45 C41,45.553 40.553,46 40,46 L34,46 C33.447,46 33,45.553 33,45 L33,43 L15,43 L15,45 C15,45.553 14.553,46 14,46 L8,46 C7.447,46 7,45.553 7,45 L7,43 L3,43 C2.447,43 2,42.553 2,42 L2,33 L4,33 L4,41 L44,41 L44,4 L4,4 L4,11 L2,11 L2,3 C2,2.448 2.447,2 3,2 L45,2 C45.553,2 46,2.448 46,3 L46,3 Z M2,27 L4,27 L4,17 L2,17 L2,27 Z" id="Fill-1" fill="#6CAE3E"></path>
</g>
</svg>
<?xml version="1.0"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" exclude-result-prefixes="svg">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="svg:svg">
<shapes name="mxgraph.aws4">
<shape aspect="fixed" h="{replace(@height, 'px', '')}"
name="{svg:title}" strokewidth="inherit" w="{replace(@width, 'px', '')}">
<connections/>
<foreground>
<xsl:apply-templates />
</foreground>
</shape>
</shapes>
</xsl:template>
<xsl:template match="svg:g">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="svg:path">
<xsl:variable name="d1" select="replace(@d,'M','*M')"/>
<xsl:variable name="d2" select="replace($d1,'L','*L')"/>
<xsl:variable name="d3" select="replace($d2,'A','*A')"/>
<xsl:variable name="d4" select="replace($d3,'C','*C')"/>
<xsl:variable name="d5" select="replace($d4,'Z','*Z')"/>
<xsl:variable name="d" select="tokenize($d5,'\*+')"/>
<xsl:for-each select="$d">
<xsl:variable name="comkey" select="substring(.,1,1)"/>
<xsl:variable name="comline" select="normalize-space(substring(.,2))"/>
<xsl:choose>
<xsl:when test="$comkey = 'M'">
<xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
<move x="{$comlinespace[1]}" y="{$comlinespace[2]}"/>
</xsl:when>
<xsl:when test="$comkey = 'L'">
<xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
<line x="{$comlinespace[1]}" y="{$comlinespace[2]}"/>
</xsl:when>
<xsl:when test="$comkey = 'A'">
<xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
<arc rx="{$comlinespace[1]}" ry="{$comlinespace[2]}"
x-axis-rotation="{$comlinespace[3]}"
large-arc-flag="{$comlinespace[4]}"
sweep-flag="{$comlinespace[5]}"
x="{$comlinespace[6]}" y="{$comlinespace[7]}"/>
</xsl:when>
<xsl:when test="$comkey = 'C'">
<xsl:variable name="comlinespace" select="tokenize($comline,' ')"/>
<curve>
<xsl:for-each select="$comlinespace">
<xsl:variable name="points" select="tokenize(.,',')"/>
<xsl:attribute name="x{position()}">
<xsl:value-of select="$points[1]"/>
</xsl:attribute>
<xsl:attribute name="y{position()}">
<xsl:value-of select="$points[2]"/>
</xsl:attribute>
</xsl:for-each>
</curve>
</xsl:when>
<xsl:when test="$comkey = 'Z'">
<close/>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:template>
<xsl:template match="text()"></xsl:template>
</xsl:stylesheet>
Applying the command:
saxonb-xslt -o svgaws.xml svg.svg convert.xsl
I generate the following XML document.
<?xml version="1.0" encoding="UTF-8"?>
<shapes name="mxgraph.aws4">
<shape aspect="fixed" h="48"
name="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark"
strokewidth="inherit"
w="48px">
<connections/>
<foreground>
<move x="10.298" y="22.955"/>
<line x="8.298" y="22.969"/>
<curve x1="8.333" y1="27.982" x2="10.654" y2="32.573" x3="14.668" y3="35.564"/>
<curve x1="17.503" y1="37.677" x2="20.819" y2="38.696" x3="24.109" y3="38.696"/>
<curve x1="28.942" y1="38.696" x2="33.717" y2="36.496" x3="36.82" y3="32.332"/>
<curve x1="42.036" y1="25.334" x2="40.587" y2="15.396" x3="33.589" y3="10.18"/>
<curve x1="26.813" y1="5.13" x2="17.297" y2="6.345" x3="11.963" y3="12.775"/>
<line x="12" y="10.014"/>
<line x="10" y="9.987"/>
<line x="9.933" y="14.987"/>
<curve x1="9.929" y1="15.252" x2="10.031" y2="15.508" x3="10.216" y3="15.698"/>
<curve x1="10.402" y1="15.888" x2="10.654" y2="15.997" x3="10.919" y3="16"/>
<line x="15.986" y="16.068"/>
<line x="16.014" y="14.068"/>
<line x="13.513" y="14.035"/>
<curve x1="18.176" y1="8.43" x2="26.479" y2="7.376" x3="32.394" y3="11.783"/>
<curve x1="38.507" y1="16.341" x2="39.774" y2="25.023" x3="35.217" y3="31.137"/>
<curve x1="30.658" y1="37.251" x2="21.979" y2="38.517" x3="15.863" y3="33.96"/>
<curve x1="12.357" y1="31.347" x2="10.328" y2="27.335" x3="10.298" y3="22.955"/>
<line x="10.298" y="22.955"/>
<close/>
<move x="24" y="19"/>
<curve x1="21.794" y1="19" x2="20" y2="20.795" x3="20" y3="23"/>
<curve x1="20" y1="25.206" x2="21.794" y2="27" x3="24" y3="27"/>
<curve x1="26.206" y1="27" x2="28" y2="25.206" x3="28" y3="23"/>
<curve x1="28" y1="20.795" x2="26.206" y2="19" x3="24" y3="19"/>
<line x="24" y="19"/>
<close/>
<move x="16.946" y="28.78"/>
<line x="19.175" y="26.552"/>
<curve x1="18.441" y1="25.556" x2="18" y2="24.33" x3="18" y3="23"/>
<curve x1="18" y1="21.622" x2="18.473" y2="20.353" x3="19.257" y3="19.339"/>
<line x="16.947" y="17.191"/>
<line x="18.309" y="15.727"/>
<line x="20.729" y="17.977"/>
<curve x1="21.671" y1="17.362" x2="22.793" y2="17" x3="24" y3="17"/>
<curve x1="25.342" y1="17" x2="26.577" y2="17.448" x3="27.577" y3="18.195"/>
<line x="29.982" y="15.726"/>
<line x="31.414" y="17.121"/>
<line x="28.965" y="19.636"/>
<curve x1="29.617" y1="20.597" x2="30" y2="21.754" x3="30" y3="23"/>
<curve x1="30" y1="24.252" x2="29.613" y2="25.415" x3="28.955" y3="26.377"/>
<line x="31.414" y="28.756"/>
<line x="30.024" y="30.194"/>
<line x="27.565" y="27.815"/>
<curve x1="26.567" y1="28.556" x2="25.336" y2="29" x3="24" y3="29"/>
<curve x1="22.742" y1="29" x2="21.574" y2="28.61" x3="20.61" y3="27.946"/>
<line x="18.361" y="30.194"/>
<line x="16.946" y="28.78"/>
<close/>
<move x="35" y="44"/>
<line x="39" y="44"/>
<line x="39" y="43"/>
<line x="35" y="43"/>
<line x="35" y="44"/>
<close/>
<move x="9" y="44"/>
<line x="13" y="44"/>
<line x="13" y="43"/>
<line x="9" y="43"/>
<line x="9" y="44"/>
<close/>
<move x="46" y="3"/>
<line x="46" y="42"/>
<curve x1="46" y1="42.553" x2="45.553" y2="43" x3="45" y3="43"/>
<line x="41" y="43"/>
<line x="41" y="45"/>
<curve x1="41" y1="45.553" x2="40.553" y2="46" x3="40" y3="46"/>
<line x="34" y="46"/>
<curve x1="33.447" y1="46" x2="33" y2="45.553" x3="33" y3="45"/>
<line x="33" y="43"/>
<line x="15" y="43"/>
<line x="15" y="45"/>
<curve x1="15" y1="45.553" x2="14.553" y2="46" x3="14" y3="46"/>
<line x="8" y="46"/>
<curve x1="7.447" y1="46" x2="7" y2="45.553" x3="7" y3="45"/>
<line x="7" y="43"/>
<line x="3" y="43"/>
<curve x1="2.447" y1="43" x2="2" y2="42.553" x3="2" y3="42"/>
<line x="2" y="33"/>
<line x="4" y="33"/>
<line x="4" y="41"/>
<line x="44" y="41"/>
<line x="44" y="4"/>
<line x="4" y="4"/>
<line x="4" y="11"/>
<line x="2" y="11"/>
<line x="2" y="3"/>
<curve x1="2" y1="2.448" x2="2.447" y2="2" x3="3" y3="2"/>
<line x="45" y="2"/>
<curve x1="45.553" y1="2" x2="46" y2="2.448" x3="46" y3="3"/>
<line x="46" y="3"/>
<close/>
<move x="2" y="27"/>
<line x="4" y="27"/>
<line x="4" y="17"/>
<line x="2" y="17"/>
<line x="2" y="27"/>
<close/>
</foreground>
</shape>
</shapes>