4

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

Improve this question

3 Answers 3

Reset to default
5

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>
Improve this answer
6
  • for me the plugin does not work, whether multiple elements with the same style or just a single one is selected.
    – hoijui
    Commented Apr 27, 2020 at 6:55
  • According to the sample you provided, I manually edited the SVG, and that worked. .. but as soon as I open and save it again with Inkscape, it adds the style back into the style="..." attributes to all the elements that have a class, so the CSS becomes irrelevant. (using Inkscape 0.92)
    – hoijui
    Commented Apr 27, 2020 at 7:04
  • @hoijui Hi. This isn't a chat forum. If you have a question, you should ask it as a new question. You can link to this question in your own question. Thanks.
    – Billy Kerr
    Commented Apr 27, 2020 at 8:31
  • @houiju - please also note that the output from the extension is not supposed to be reopened and saved from Inkscape. It's an extension for output only.
    – Billy Kerr
    Commented Apr 27, 2020 at 8:39
  • I was clarifying the practical use-value of the the solution in this answer, which is important to be next to the answer, not in any other place.
    – hoijui
    Commented Apr 27, 2020 at 13:16
1
  1. go into inkspace 1.1 --> Extensions --> page style --> Merge Styles into CSS
  2. add object --> apply created style, more information in https://wiki.inkscape.org/wiki/index.php/Style_Editor
  3. them export to svg
  4. edit class on chrome or other txt editor
Improve this answer
0

I was also wondering about this, and the first thing I found is:

https://wiki.inkscape.org/wiki/CSS_Support

Current State

Inkscape supports a single <style> element in the document. If there is more than one style element, Inkscape will pick one to use.

@import is supported as of 0.93 (read-only). other @-rules are not supported.

There is a simple style editor (Object -> Style dialog). Selectors can be added/deleted.

I checked in Inkscape 1.2, this is now called Object/Selectors and CSS; this pane is basically empty, unless you click on an object.

So, I tried the following in Inkscape 1.2:

  • Create an empty .svg file using the Inkscape command line - either of these will do:
# the below works - generates .svg file with sodipodi and such:
inkscape --actions="file-new;export-filename:newfile.svg;export-do"

# the below also works - .svg file does not have sodipodi
inkscape --actions="file-new" --export-plain-svg --export-filename=newfile.svg

Now, if you open newfile.svg in a text editor, you will notice it does not have a <style> element.

Next, open newfile.svg in Inkscape, draw a rectangle and save. If you open newfile.svg now in a text editor, you will notice that again, it does not have a <style> element.

Now, go back to opened newfile.svg in Inkscape, open Object/Selectors and CSS, and select the rectangle: the upper part of that pane gets populated with the style= attributes. Then click the + button below, at the bottom of the pane, "Add a new CSS selector":

+ button css selector

You will get a CSS selector window with #rect231 there:

CSS selector window

... click Add here; you get some more stuff in the bottom of the Object/Selectors and CSS pane:

More CSS Selectors

None that, aside from the entry for the CSS selector at the bottom, there is also this section added above it (in the middle of the pane):

#rect231 {
}

You can double-click and add attributes here.

Anyways, save the file in Inkscape (without adding further attributes), and open it again in a text editor - you can now see a <style> entry for the document; a diff would show:

    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
+  <style
+     id="style233">#rect231 {  }
+</style>
   <sodipodi:namedview
      id="namedview14"
      pagecolor="#ffffff"

Then, I guess, one can open the .svg file in a text editor, and edit the <style> contents also there.

Improve this answer

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.