I'd like to export the SVG code out of Illustrator so I can use it to generate a background and later animate it with JavaScript.

In the tutorial that I am following the dude generated the SVG Code, however he got the points. I didn't and I followed him to the point (no pun intended).

Are there some default settings that need to be changed for the points to display in the SVG Code?

Any hint in the right direction would help.

Bellow the code that Illustrator generated for me:

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 284 157.5" style="enable-background:new 0 0 284 157.5;" xml:space="preserve">
<style type="text/css">
<rect class="st0" width="284" height="157.5"/>

And here the points that actually should be there, at least according to the tutorial i was following:

<polygon class="polymorph" points="215,100 0,100 0,0 47.7,0 215,0" />

1 Answer 1


That polygon code creates a rectangle with 5 anchor points.


  1. 215,100 -- top right
  2. 0,100 -- bottom right
  3. 0,0 -- top left
  4. 47.7,0 <-- extra anchor
  5. 215,0 -- bottom left

enter image description here

I suspect that's why. With only 4 anchors, it's a rectangle. With 5 anchors, it's a polygon.

Your Answer

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

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