[sugar] icon assistance/validation

Paul Fox pgf at foxharp.boston.ma.us
Sat Mar 15 13:04:46 EDT 2008


many thanks to gary and bert for their advice.

i think i found the biggest issue with what i was doing:

    - inkscape lets you save your work as either a "plain" svg,
      or, by default, as an "inkscape" svg.  don't save your
      work as an "inkscape" svg.

in addition:

    - bert's suggestion of doing one's drawing in two colors (i.e., red
      and yellow) instead of gray and black, makes it easier somehow.

    - gary's suggestion to preview with a browser is a good one: 
      firefox seems to be as capable as sugar at not-displaying
      bad images, or "inkscape format" images.  in addition, it
      will sometimes warn of syntax errors, which sugar, of
      course, does not.

    - the ';' character at the end of "fill:&fill_color;" is very
      important, even if it appears in a line like:
	style="fill:&fill_color;;fill-opacity:1;fill-rule:non-zero...  "
      the extra ';' looks redundant, but it's not.

i'm happy to add some or all of this to the wiki.  i promise i won't
start yet another page. :-)  (i assume anyone can register for editing?)

i liked bert's suggestion of extracting the core from the inkscape-created
SVG and dropping it into a clean template, but my SVG files don't have
the '<g>...</g>' block he referred to.  once i started saving as plain
svg, however, the file isn't all that complex, and the following script
will convert it to the required sugar-accessible format:


#!/bin/sh
#
# inksvg2sugar --
#  convert inkscape-created "plain" SVG files to sugar-compatible

svg=$1
:<$svg

#these are the colors with which the icon was created with the drawing tool
myfill=ffff00
mystroke=ff0000

#  - replace the "Created" line with a sugar-compatible header.
#  - in case our header is already there (we've been run twice?)
#    replace the contents of that header to refresh the chosen colors.
#    (these colors are placeholders as far as sugar is concerned, but
#    they're still our preference when editing the icon.)
#  - replace all hard-coded fill: and stroke: definitions with the
#    indirect variable references.
#  - replace "cross-definitions" as well: sometimes color roles are reversed.
#  - finally, replace any _other_ stroke and fill colors, with the single
#    allowable values.

sed -i \
    -e 's;<!-- Created with Inkscape.*-->;\
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"\
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [\
  <!ENTITY fill_color "#'$myfill'">\
  <!ENTITY stroke_color "#'$mystroke'">\
]>;' \
    -e 's/\(ENTITY fill_color \)#[0-9a-z]\+/\1 "#'$myfill'">/i' \
    -e 's/\(ENTITY stroke_color \)#[0-9a-z]\+/\1 "#'$mystroke'">/i' \
    -e 's/stroke:#'$mystroke';/stroke:\&stroke_color;;/ig' \
    -e 's/fill:#'$myfill';/fill:\&fill_color;;/ig' \
    -e 's/fill:#'$mystroke';/fill:\&stroke_color;;/ig' \
    -e 's/stroke:#'$myfill';/stroke:\&fill_color;;/ig' \
    -e 's/stroke:#[0-9a-f]\+;/stroke:\&stroke_color;;/ig' \
    -e 's/fill:#[0-9a-f]\+;/fill:\&fill_color;;/ig' \
    $svg


paul
=---------------------
 paul fox, pgf at foxharp.boston.ma.us (arlington, ma, where it's 29.1 degrees)


More information about the Sugar mailing list