2

I am using Inkscape and a CSS file for styling a project. I tried to add the class attributes in the XML editor and it didn't change anything. Is there another way I could add classes effectively rather than have to manually remove style elements from the SVG files? Thanks

2

You can't change it in the XML editor. However, I haven't used this before, but you might want to take a look at Extensions > Stylesheet > Merge styles into CSS, which is available in Inkscape 0.92

You have to select items which share the same style, or the extension will throw an error, then run the extension and name the class. Do this for all the classes you want to set up.

I have just tested it and it seems to work, although I still see some weird inline stroke styles added to the text, although I don't really know why it's doing that, since the text has no stroke. I suppose it will kind of get you half-way there, but may still need some manual cleaning up.

Here's an example output to Plain SVG, with no manual tweaks, warts and all!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg4651"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">
  <style
     id="style5249">
.yellowstuff {
    stroke-linejoin:miter;
    opacity:1;
    enable-background:accumulate;
    vector-effect:none;
    stroke-opacity:1;
    fill-opacity:1;
    color:#000000;
    fill-rule:nonzero;
    paint-order:normal;
    visibility:visible;
    stroke-dashoffset:0;
    stroke:none;
    stroke-linecap:butt;
    stroke-miterlimit:4;
    marker:none;
    stroke-dasharray:none;
    overflow:visible;
    stroke-width:0.52916664;
    display:inline;
    fill:#ffcc00;
}
.redstuff {
    stroke-linejoin:miter;
    opacity:1;
    enable-background:accumulate;
    vector-effect:none;
    stroke-opacity:1;
    fill-opacity:1;
    color:#000000;
    fill-rule:nonzero;
    paint-order:normal;
    font-variant-east_asian:normal;
    visibility:visible;
    stroke-dashoffset:0;
    stroke:#000000;
    stroke-linecap:butt;
    stroke-miterlimit:4;
    marker:none;
    stroke-dasharray:none;
    overflow:visible;
    stroke-width:0.52916664;
    display:inline;
    fill:#ff0000;
}
.text1 {
    stroke-linejoin:miter;
    font-size:12.69999981px;
    fill-opacity:1;
    font-variant-numeric:normal;
    letter-spacing:0px;
    font-variant-ligatures:normal;
    stroke:none;
    stroke-linecap:butt;
    stroke-width:0.26458332px;
    font-style:normal;
    fill:#000000;
    font-stretch:normal;
    font-variant:normal;
    font-weight:normal;
    -inkscape-font-specification:'sans-serif, Normal';
    font-feature-settings:normal;
    font-variant-caps:normal;
    font-family:sans-serif;
    text-align:start;
    word-spacing:0px;
    writing-mode:lr-tb;
    stroke-opacity:1;
    text-anchor:start;
    line-height:6.61458302px;
}</style>
  <defs
     id="defs4645" />
  <metadata
     id="metadata4648">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       style="    "
       id="rect5196"
       width="49.136902"
       height="52.160713"
       x="18.142857"
       y="18.053572"
       class="yellowstuff" />
    <ellipse
       style="    "
       id="path5198"
       cx="105.45536"
       cy="50.181545"
       rx="21.544643"
       ry="22.300594"
       class="yellowstuff" />
    <path
       style="    font-variant-east_asian:normal;"
       d="m 167.82143,30.904762 c -3.77977,0 -27.97024,2.267857 -24.94643,12.095239 3.02381,9.827379 15.11905,9.071427 12.85119,18.898809 -2.26786,9.827379 0.75595,20.410712 12.09524,14.363094 11.33928,-6.047619 -0.75596,-12.851191 5.29166,-22.67857 6.04762,-9.827382 17.38691,-5.291667 13.60715,-13.607145 -3.77977,-8.315476 -18.89881,-9.071427 -18.89881,-9.071427 z"
       id="path5200"
       class="yellowstuff" />
    <rect
       class="redstuff"
       style="    "
       id="rect5216"
       width="34.773811"
       height="52.916664"
       x="27.970238"
       y="97.428574" />
    <circle
       class="redstuff"
       style="    "
       id="path5218"
       cx="102.80952"
       cy="114.05952"
       r="16.630953" />
    <path
       class="redstuff"
       style="    "
       d="m 153.45833,106.5 c -4.53571,0.75595 -27.97024,5.29167 -18.14286,18.89881 9.82739,13.60714 -10.58333,15.875 1.51191,23.43452 12.09524,7.55952 6.80357,-18.14285 20.41071,-13.60714 13.60715,4.53571 40.82143,1.5119 25.70238,-6.80357 -15.11904,-8.31548 -23.43452,-3.02381 -25.70238,-9.07143 -2.26785,-6.04762 8.31548,-10.58334 -3.77976,-12.85119 z"
       id="path5234" />
    <text
       xml:space="preserve"
       style="    "
       x="30.994047"
       y="188.8988"
       id="text5243"
       class="text1"><tspan
         id="tspan5241"
         x="30.994047"
         y="188.8988"
         style="stroke-width:0.26458332px">This is some text</tspan></text>
    <text
       xml:space="preserve"
       style="    "
       x="44.601185"
       y="219.1369"
       id="text5247"
       class="text1"><tspan
         id="tspan5245"
         x="44.601185"
         y="219.1369"
         style="stroke-width:0.26458332px">This is some more text</tspan></text>
  </g>
</svg>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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