0

I have created a simple chevron icon in Illustrator and now exporting it as an SVG. Technically, it's just a path with a 2pt round brush stroke.

When I export it as an SVG with the stroke applied I get the following markup:

<svg id="F-Chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 16">
  <title>Icons</title>
  <g id="Right">
    <path d="M7.79,5.71l7,7V11.29l-7,7a1,1,0,0,0,1.41,1.41l7-7a1,1,0,0,0,0-1.41l-7-7A1,1,0,0,0,7.79,5.71Z" transform="translate(-7.5 -4)"/>
  </g>
</svg>

When I export the layer without the stroke I get this, which is my desired result, but without a stroke attribute.

<svg id="F-Chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 14">
  <title>Icon</title>
  <g id="Right">
    <polyline points="0 0 7 7 0 14" style="fill: none"/>
  </g>
</svg>

Is it possible to have the stroke applied within Illustrator but export as an SVG to get something like the below? (Note the attributes on the SVG tag)

<svg id="F-Chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 14" stroke-width="2" stroke="#000">
  <title>Icon</title>
  <g id="Right">
    <polyline points="0 0 7 7 0 14" style="fill: none"/>
  </g>
</svg>

Any help is much appreciated, can't find a way around it unless I apply the strokes manually in each icon SVG file.

Thank you!

2 Answers 2

1

You can just add the stroke attributes to the SVG you want...

<svg id="F-Chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 14" stroke-width="2" stroke="#000">
  <title>Icon</title>
  <g id="Right" stroke-width="1" stroke="blue">
    <polyline points="0 0 7 7 0 14" style="fill: none;"/>
  </g>
</svg>
1
  • Of course I could, but as I already mentioned in the post I didn't want to manually add the stroke every time I saved a single icon. Unless I wrote a script for it but it would just turn out messy and become a lengthy export process.
    – Aotik
    Oct 17, 2017 at 15:58
1

The issue here was that I had created a custom brush stroke, which I'm assuming doesn't play well with SVG exports. This was fixed by using a round capped basic stroke and manually setting the stroke width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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