3

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.

0

For those looking, @joojaa was correct. The SVG just needed to be a single compound path. I eventually found that the code permitted grouped paths with the tags surrounding the group of paths. While new to SVGs it did take a bunch of resizing before the SVG matched appropriately with others.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.