Dear all

I try to create my first svg web site.
Just a static one, whith links.
So I draw it with inkscape and then I realize it's not "web ready" as all styles are set on each object.
It should be more elegant and conveniant to have css, as less as possible, to be able to change only one value to impact all pages.

Is there a way to extract styles, to group it and then convert it into css ?
And of course, replace styles entry by as less "class=x" as possible in the svg file.
(one per layer or one per group should be enought if layers / group have been made to assemble similar objects)

in fact I already wrote a small bash line for the extraction :
grep -Eo 'style="[^"]*"' $i |sort -u |sed -e 's/ *style="/classX \{\n\t/g' -e 's/;/;\n\t/g' -e 's/"/\n\}\n/g'
(replace $i by the svg file)

But now I have to modify the svg file, so I prefer to ask : is a tool, en extention or a script to do the job ?

Is Inkscape working whith css ?
What happens if I have to modify the illustration whith inkscape after having converted it to css style ?

Thanks !

Hello:
Yes, it can:
http://tavmjong.free.fr/INKSCAPE/MANUAL ... Style.html

It seems that there it's not exactly like the html style, ... in google you can find more about CSS and SVG.

Also, there is an extension in the extensions menu, in the option : Web>Slicer> Export to ... , but I don't use it
http://tavmjong.free.fr/INKSCAPE/MANUAL ... Web-Slicer

Thanks for this answer.

By reading the doc I've seen :
"This extension facilitates slicing a drawing into rectangular bitmaps for use in Web pages. It will optionally export CSS and HTML code for use with the bitmaps."

Where I understand that this extention is done to produce bitmaps.
I don't want to produce bitmaps. I want to do html5, css3 and svg1.1 code mixed together.



Oh, and I tried this extention already, but it doesn't produce any output :

Traceback (most recent call last):
File "webslicer_export.py", line 437, in <module>
e.affect()
File "/usr/share/inkscape/extensions/inkex.py", line 215, in affect
self.effect()
File "webslicer_export.py", line 119, in effect
error = self.validate_inputs()
File "webslicer_export.py", line 75, in validate_inputs
self.unique_html_id( self.get_slicer_layer() )
File "webslicer_export.py", line 96, in unique_html_id
for child in el.getchildren():
AttributeError: 'NoneType' object has no attribute 'getchildren'


Thanks again

larhT wrote:Thanks for this answer.

Oh, and I tried this extention already, but it doesn't produce any output :

Traceback (most recent call last):
File "webslicer_export.py", line 437, in <module>
e.affect()
File "/usr/share/inkscape/extensions/inkex.py", line 215, in affect
self.effect()
File "webslicer_export.py", line 119, in effect
error = self.validate_inputs()
File "webslicer_export.py", line 75, in validate_inputs
self.unique_html_id( self.get_slicer_layer() )
File "webslicer_export.py", line 96, in unique_html_id
for child in el.getchildren():
AttributeError: 'NoneType' object has no attribute 'getchildren'

Thanks again

I tried the slicer svg to html/css as well and I got a similar error: