Skip to main content
cathys43548073
Participant
October 16, 2017
Question

Save as SVG and style using Presentation Attributes styling

  • October 16, 2017
  • 3 replies
  • 6109 views

I have several Illustrator files that I would like to have as svgs. I have been using Save As .. to save them as svgs and NOT Export as svg. Up until recently the svg that has been created by this workflow had been exactly what I wanted.

This is an example here;-

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 21.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 512 512" enable-background="new 0 0 512 512" xml:space="preserve">

<path fill="none" stroke="#000000" stroke-width="30" stroke-linecap="round" d="M368,245.6c0-61.9-50.1-112-112-112

c-61.9,0-112,50.1-112,112v133.7"/>

<line fill="none" stroke="#000000" stroke-width="30" stroke-linecap="round" x1="368" y1="379.3" x2="368" y2="245.6"/>

</svg>

Having come to these files I am now finding that doing Save As .. on the exact same file (with no changes) creates this;-

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 21.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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<style type="text/css">

.Arched_x0020_Green{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}

.st0{fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;}

</style>

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="512" x2="0.7071" y2="511.2929">

<stop  offset="0" style="stop-color:#339A2A"/>

<stop  offset="0.9831" style="stop-color:#121E0D"/>

</linearGradient>

<path class="st0" d="M368,245.6c0-61.9-50.1-112-112-112c-61.9,0-112,50.1-112,112v133.7"/>

<line class="st0" x1="368" y1="379.3" x2="368" y2="245.6"/>

</svg>

I have not changed the original file and have not changed my workflow. I have used Save As.. > .svg for both of the above. It's possible that I have changed some preference setting in Illustrator somewhere but I have no idea what.

Please can someone help me? I would like to have ;-

fill="none" stroke="#000000" stroke-width="30" stroke-linecap="round"

instead of the css styling. Also I have no idea where the gradient is coming from. I have not added that to the ai file

    This topic has been closed for replies.

    3 replies

    Participant
    January 13, 2020

    When you save as SVG make sure that in "CSS Properties" you have selected "Presentation Atributes". 
    If you ever want to get the <style> tag, switch to "Style Elements".

    Srishti_Bali
    Legend
    November 3, 2017

    Hi cathys,

    I would like to know if the step suggested by Monika worked for you, or the issue still persists.

    Kindly update the discussion if you need further assistance with it.

    Thanks,

    Srishti

    Monika Gause
    Community Expert
    Community Expert
    October 16, 2017

    Try different settings for the styling in the SVG options dialog box.