: 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.
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
More posts by @Jessie844
1 Comments
Sorted by latest first Latest Oldest Best
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>
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.