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

Design

Andrew Dickens
Andrew Dickens
18,352 Points
Posted by Andrew Dickens
Andrew Dickens
18,352 Points

SVG Adobe Illustrator Export Help

Hi if you're doing the svg courses here in treehouse you may have had some problems when creating your own svg in adobe and trying to use them along side the videos, mainly the output code is not the same as Guil's or Nick's and things just ain't happening.

Here's some exporting tips for adobe illustrator CC to help with the frustration (thanks to https://teamtreehouse.com/jacobmishkin for helping me get there)

Illustrator CC offers about 5 different ways to export, kind of helpful but each way has different degrees of settings. Here's a way to achieve the same svg code as Guil's is

file --> save as --> chose svg as format --> now in a new window click more options --> Advanced Options --> CSS properties --> choose 'Presentation Attributes'

Here's an xmas tree

<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 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
    <polygon fill="#39B54A" points="46,37 39.8,37 46,46 35,46 35,56 29,56 29,46 18,46 24.1,37 18,37 22.4,30.5 18,30.5 31.9,10 
        46,30.5 41.5,30.5   "/>
    <path d="M36,57h-8V47H16.1l6.1-9h-6.1l4.4-6.5h-4.4L31.9,8.2l16,23.3h-4.5l4.5,6.5h-6.2l6.2,9H36V57z M30,55h4V45h10.1l-6.2-9h6.2
        l-4.5-6.5h4.5L31.9,11.8l-12,17.7h4.4L19.9,36H26l-6.1,9H30V55z"/>
    <rect x="35" y="32" width="2" height="2"/>
    <rect x="36" y="25" width="2" height="2"/>
    <rect x="35" y="40" width="2" height="2"/>
    <rect x="26" y="23" width="2" height="2"/>
    <rect x="29" y="31" width="2" height="2"/>
    <rect x="25" y="40" width="2" height="2"/>
    <rect x="31" y="17" width="2" height="2"/>
    <rect x="0.5" y="0.5" fill="none" width="64" height="64"/>
</g>
</svg>

Hurray....

Also if you chose CSS properties --> style element , it will out put some ready made style class's which you can cut and paste into your CSS stylesheet

<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 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#39B54A;}
    .st1{fill:none;}
</style>
<g>
    <polygon class="st0" points="46,37 39.8,37 46,46 35,46 35,56 29,56 29,46 18,46 24.1,37 18,37 22.4,30.5 18,30.5 31.9,10 46,30.5 
        41.5,30.5   "/>
    <path d="M36,57h-8V47H16.1l6.1-9h-6.1l4.4-6.5h-4.4L31.9,8.2l16,23.3h-4.5l4.5,6.5h-6.2l6.2,9H36V57z M30,55h4V45h10.1l-6.2-9h6.2
        l-4.5-6.5h4.5L31.9,11.8l-12,17.7h4.4L19.9,36H26l-6.1,9H30V55z"/>
    <rect x="35" y="32" width="2" height="2"/>
    <rect x="36" y="25" width="2" height="2"/>
    <rect x="35" y="40" width="2" height="2"/>
    <rect x="26" y="23" width="2" height="2"/>
    <rect x="29" y="31" width="2" height="2"/>
    <rect x="25" y="40" width="2" height="2"/>
    <rect x="31" y="17" width="2" height="2"/>
    <rect x="0.5" y="0.5" class="st1" width="64" height="64"/>
</g>
</svg>