: How can you render an SVG path with only the d="..." attribute? In looking to add another SVG to our svg-def.svg file for our website, one would assume it wise to mirror the approach of a

@Smith574

Posted in: #AdobeIllustrator #Html #Svg

In looking to add another SVG to our svg-def.svg file for our website, one would assume it wise to mirror the approach of a previous developer. In our case, the prior developer was able to entirely export each SVG into a path tag with a single attribute of d="...".

In our attempts to replicate the same workflow, all of our Illustrator to SVG files have resulted in a path tag with rectangle tags, transforms and css. What can one do to export an SVG with just the path tag and d attribute?

An example of the previous developer's rendering a globe is shown below (added an ID attribute):

<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>


Ours Illustrator exports provide code more to the gist of:

<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>


You'll notice the later has data-name, styles, etc. and is incompatible with the plain d="..." format.

Vote Up Vote Down

Login to post a comment!