Mobile app version of vmapp.org
Login or Join
Jessie844

: Managing styles with CSS classes in Inkscape 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.

@Jessie844

Posted in: #Inkscape #Svg #Xml

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

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Jessie844

1 Comments

Sorted by latest first Latest Oldest Best

 

@Goswami567

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>

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme