Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions