Bei der Suche nach einem weiteren SVG zu unserer svg-def.svg-Datei für unsere Website würde man davon ausgehen, dass es ratsam ist, den Ansatz eines früheren Entwicklers zu spiegeln. In unserem Fall war der vorherige Entwickler in der Lage, jedes SVG vollständig in ein Pfad-Tag mit einem einzigen Attribut von d="..." zu exportieren.
Bei unseren Versuchen, denselben Workflow zu replizieren, haben alle unsere Illustrator-zu-SVG-Dateien zu einem Pfad-Tag mit Rechteck-Tags, Transformationen und CSS geführt. Was kann man tun, um ein SVG nur mit dem Pfad-Tag und dem d-Attribut zu exportieren?
Ein Beispiel für das Rendern eines Globus durch den vorherigen Entwickler ist unten dargestellt (ein ID-Attribut wurde hinzugefügt):
<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>
Unsere Illustrator-Exporte bieten mehr Code zum Wesentlichen:
<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>
Sie werden feststellen, dass letzteres Datennamen, Stile usw. hat und nicht mit dem einfachen d="..."-Format kompatibel ist.
Für die Suchenden war @joojaa richtig. Das SVG musste nur ein einzelner zusammengesetzter Pfad sein. Ich fand schließlich heraus, dass der Code gruppierte Pfade mit den Tags, die die Gruppe von Pfaden umgeben, zuließ. Obwohl SVGs neu sind, war eine Reihe von Größenanpassungen erforderlich, bevor das SVG angemessen mit anderen übereinstimmte.