[noob] svg css generator

Post about projects that use Inkscape for web design.
larhT
Posts: 2
Joined: Wed Jul 17, 2013 11:31 pm

[noob] svg css generator

Postby larhT » Thu Jul 18, 2013 5:21 pm

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 !

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: [noob] svg css generator

Postby hulf2012 » Sat Jul 20, 2013 3:47 am

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
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

larhT
Posts: 2
Joined: Wed Jul 17, 2013 11:31 pm

Re: [noob] svg css generator

Postby larhT » Sat Jul 20, 2013 6:52 pm

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

rhandom
Posts: 1
Joined: Mon Jun 23, 2014 9:42 pm

Re: [noob] svg css generator

Postby rhandom » Mon Jun 23, 2014 9:53 pm

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:

Code: Select all

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'


Any update on this or a possible workaround?

User avatar
ragstian
Posts: 1159
Joined: Thu Oct 11, 2012 2:44 am
Location: Stavanger-Norway

Re: [noob] svg css generator

Postby ragstian » Mon Jun 23, 2014 10:33 pm

Good Luck!
( ͡° ͜ʖ ͡°)
RGDS
Ragnar


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 1 guest