Skip to content

Set classes in SVG and generate all variants with CSS #5

@bobek

Description

@bobek

I would like to suggest the following, feel free to close if you don't want to follow this path.

  • picking SVG as the only source format (e.g. drop ppt), so there is no ambiguity what to edit
  • add class attribute to objects in SVG
  • use CSS to generate various variants

For example, this is the text node for one of the Type boxes. As you can see, I've added class="normal_label" attribute. You can do it directly in Inkscape as well.

<text               
   class="normal_label"
   inkscape:label="text125"
   fill="#bfbfbf"   
   font-family="Calibri, Calibri_MSFontService, sans-serif"
   font-weight="400"
   font-size="24px" 
   transform="translate(838.371,658)"
   id="text125">Type</text>

image

I can now create PDF or PNG directly from SVG on commandline with rsvg-convert from librsvg2-bin package (on Debian). For example

rsvg-convert -f pdf rust-memory-container-cs.svg > normal.pdf

will generate PDF as in SVG. So it will look like this
image

But CSS will allow to change attributes based on selectors, such as classes. So if red_labels.css looks like

.normal_label {
  fill: #ff0000;
}

and covert to pdf with

rsvg-convert -f pdf -s red_labels.css rust-memory-container-cs.svg > styled.pdf

image

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions