Al buscar agregar otro SVG a nuestro archivo svg-def.svg para nuestro sitio web, uno supondría que sería prudente reflejar el enfoque de un desarrollador anterior. En nuestro caso, el desarrollador anterior pudo exportar por completo cada SVG a una etiqueta de ruta con un único atributo de d="...".
En nuestros intentos de replicar el mismo flujo de trabajo, todos nuestros archivos de Illustrator a SVG dieron como resultado una etiqueta de ruta con etiquetas rectangulares, transformaciones y css. ¿Qué se puede hacer para exportar un SVG con solo la etiqueta de ruta y el atributo d?
A continuación se muestra un ejemplo de la representación de un globo terráqueo del desarrollador anterior (se agregó un atributo de ID):
<svg><path d="M65.465,1.806c-0.255-0.399-0.621-0.718-1.057-0.919c-0.422-0.193-0.881-0.269-1.344-0.21L61.452,0
L58.92,5.52l1.109,0.467l-0.49,1.066c-4.252-1.706-8.721-2.569-13.299-2.569c-14.005,0-26.833,8.2-32.68,20.889
c-7.959,17.274-0.8,38.07,15.951,46.855l-0.365,0.793l-1.084-0.545l-2.542,5.525l1.431,0.715c0.256,0.445,0.65,0.811,1.123,1.027
c0.485,0.227,1.033,0.291,1.554,0.184c4.272,1.771,8.752,2.834,13.336,3.168v3.416h-3.061c-2.143,0-3.92,1.113-4.276,2.658h-2.081
c-4.432,0-8.176,3.729-8.902,8.865l-0.164,1.162h43.594l-0.165-1.162c-0.729-5.137-4.476-8.865-8.905-8.865h-2.083
c-0.354-1.545-2.129-2.656-4.271-2.656h-3.064v-3.449c15.505-1.271,29.083-10.727,35.594-24.857
C94.788,37.351,85.941,12.125,65.465,1.806z M22.904,61.459c-3.565-3.951-6.053-8.723-7.269-13.949l7.201,3.318
C22.497,54.424,22.52,57.988,22.904,61.459z M63.37,7.553c8.069,4.255,14.228,11.27,17.397,19.858
c3.42,9.255,3.027,19.29-1.103,28.255c-4.126,8.957-11.498,15.773-20.761,19.197c-4.135,1.525-8.438,2.303-12.789,2.303h-0.001
c-4.664,0-9.237-0.885-13.609-2.623l0.355-0.771c4.252,1.705,8.721,2.568,13.298,2.568c14.008,0,26.837-8.199,32.684-20.893
C86.8,38.176,79.641,17.382,62.891,8.594L63.37,7.553z M68.736,18.556c3.92,4.059,6.719,9.189,8.02,14.713l-7.895-3.637
C69.217,25.88,69.175,22.164,68.736,18.556z M60.605,44.548L49.214,39.3l5.259-11.414l9.586,4.417
C63.412,36.448,62.252,40.562,60.605,44.548z M68.23,34.227l9.301,4.285c0.275,4.448-0.377,8.796-1.941,12.939l-10.955-5.045
C66.284,42.444,67.492,38.352,68.23,34.227z M31.093,35.95l12.098,5.571l-5.245,11.387l-10.298-4.747
C28.297,44.021,29.455,39.919,31.093,35.95z M40.207,58.838l8.25,3.801c-3.32,3.223-6.973,5.869-10.983,7.938
c-0.771-0.229-1.547-0.484-2.314-0.773L40.207,58.838z M51.663,59.229l-9.596-4.422l5.246-11.384l11.393,5.249
C56.752,52.494,54.387,56.041,51.663,59.229z M52.762,64.617l7.905,3.641c-5.037,2.605-10.75,3.836-16.432,3.486
C47.267,69.727,50.126,67.336,52.762,64.617z M55.837,61.15c2.653-3.244,4.972-6.811,6.899-10.619l10.949,5.047
c-2.133,3.879-5.002,7.191-8.545,9.861L55.837,61.15z M40.058,21.248l10.289,4.74l-5.258,11.414L32.993,31.83
C34.953,27.992,37.326,24.438,40.058,21.248z M16.812,29.371l10.25,4.724c-1.643,3.948-2.849,8.027-3.59,12.146l-8.604-3.961
C14.597,37.853,15.25,33.518,16.812,29.371z M36.087,56.936l-5.051,10.967c-0.945-0.523-1.878-1.105-2.835-1.77
c-0.996-4.25-1.352-8.725-1.062-13.32L36.087,56.936z M64.562,27.653l-8.235-3.793l5.034-10.936
c0.717,0.395,1.406,0.809,2.097,1.262C64.482,18.473,64.852,22.997,64.562,27.653z M43.267,17.842
c3.301-3.201,6.923-5.83,10.788-7.826c1.076,0.279,2.145,0.616,3.19,1.008l-5.039,10.938L43.267,17.842z M31.777,12.547
c4.727-2.443,9.997-3.678,15.274-3.517c-2.876,1.958-5.59,4.247-8.089,6.828L31.777,12.547z M18.712,25.247
c2.143-3.893,5.024-7.213,8.577-9.883l8.595,3.958c-2.658,3.25-4.984,6.827-6.922,10.649L18.712,25.247z" id="icon-menu-icon-middle"></path><svg>
Nuestras exportaciones de Illustrator proporcionan código más a la esencia de:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.65 16.65"><defs><style>.cls-1{fill:#fff;}</style></defs><title>MiddleNew</title><path class="cls-1" d="M32,16.87h-14a1.35,1.35,0,0,0-1.34,1.34v14a1.35,1.35,0,0,0,1.34,1.34H32a1.34,1.34,0,0,0,1.34-1.34v-14A1.34,1.34,0,0,0,32,16.87Zm0.81,15.31A0.81,0.81,0,0,1,32,33h-14a0.81,0.81,0,0,1-.81-0.81v-14a0.81,0.81,0,0,1,.81-0.81H32a0.81,0.81,0,0,1,.81.81v14Z" transform="translate(-16.72 -16.87)"/><rect class="cls-1" x="13.43" y="2.95" width="0.54" height="10.74"/><rect class="cls-1" x="10.74" y="5.64" width="0.54" height="8.06"/><rect class="cls-1" x="8.06" y="8.33" width="0.54" height="5.37"/><rect class="cls-1" x="5.37" y="8.33" width="0.54" height="5.37"/><rect class="cls-1" x="2.69" y="11.01" width="0.54" height="2.69"/></svg>
Notará que el último tiene nombre de datos, estilos, etc. y es incompatible con el formato simple d="...".
Para aquellos que buscan, @joojaa estaba en lo correcto. El SVG solo necesitaba ser una ruta compuesta única. Eventualmente descubrí que el código permitía rutas agrupadas con las etiquetas que rodeaban el grupo de rutas. Si bien era nuevo en los SVG, se necesitó un montón de cambios de tamaño antes de que el SVG coincidiera adecuadamente con otros.