Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics SVG and CSS Embedding SVG XML

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

When I save it from Illustrator the markup looks different

Hej guys,

I was curious when I save my future SVG files how to makethem look like Nicks. I tried to open the svg in Illustrator and try to save it again as svg the markup looks like this

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.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="-117 240.9 360 360" style="enable-background:new -117 240.9 360 360;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#8361B4;}
    .st1{fill:#FDE135;stroke:#FFFFFF;stroke-width:8;stroke-miterlimit:10;}
    .st2{fill:#CAA61F;stroke:#FFFFFF;stroke-width:8;stroke-miterlimit:10;}
    .st3{fill:none;stroke:#CAA61F;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
    .st4{fill:#FDE135;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st5{fill:#CAA61F;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M-117,240.9h360v360h-360V240.9z"/>
<circle class="st1" cx="63" cy="420.9" r="157"/>
<circle class="st2" cx="63" cy="420.9" r="108.3"/>
<path class="st3" d="M-27.6,517.6c-26-24.2-42.2-58.8-42.2-97.1c0-22.6,5.6-43.8,15.5-62.4 M180.4,358.2
    c9.9,18.6,15.4,39.7,15.4,62.2c0,38.3-16.2,72.8-42.1,97"/>
<path class="st4" d="M63,348.7l16.9,52.1h54.8L90.4,433l16.9,52.1L63,452.9l-44.3,32.2L35.6,433l-44.3-32.2h54.8L63,348.7z"/>
<circle class="st5" cx="63" cy="348.7" r="4.4"/>
<circle class="st5" cx="106.7" cy="485.1" r="4.4"/>
<circle class="st5" cx="18.5" cy="485.1" r="4.4"/>
<circle class="st5" cx="-8.7" cy="401.3" r="4.4"/>
<circle class="st5" cx="134.7" cy="401.3" r="4.4"/>
<circle class="st5" cx="80.4" cy="400.3" r="4.4"/>
<circle class="st5" cx="46" cy="400.3" r="4.4"/>
<circle class="st5" cx="35" cy="433.4" r="4.4"/>
<circle class="st5" cx="91" cy="433.4" r="4.4"/>
<circle class="st5" cx="63" cy="454.1" r="4.4"/>
</svg>

and Nicks looks like

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" enable-background="new 0 0 360 360">
  <path fill="#8361B4" d="M0 0h360v360h-360z"/>
  <circle fill="#FDE135" stroke="#fff" stroke-width="8" stroke-miterlimit="10" cx="180" cy="180" r="157"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="8" stroke-miterlimit="10" cx="180" cy="180" r="108.3"/>
  <path d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" fill="none"/>
  <path fill="#FDE135" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="180" cy="107.8" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="223.7" cy="244.2" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="135.5" cy="244.2" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="108.3" cy="160.4" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="251.7" cy="160.4" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="197.4" cy="159.4" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="163" cy="159.4" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="152" cy="192.5" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="208" cy="192.5" r="4.4"/>
  <circle fill="#CAA61F" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="180" cy="213.2" r="4.4"/>
</svg>

1 Answer

Jonas Büchel
Jonas Büchel
16,050 Points
Jonas Büchel
Jonas Büchel
16,050 Points

Hi Elena

First, the applications include some header informations like the generator comment and the version informations.

The bigger differenvce: There are many export options in illustrator. Nick's example contains all styles inline. Your example has style in a style-tag. It's also an option to style svg with an external style-sheet.

Greets, Jonas

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

how can i find this option to change? I have been looking in export but with no success