In coolbutuseless/minisvg: SVG Document Builder

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "  "
)

library(minisvg)

Introduction

This vignette presents a small example of how to include a CSS style block within SVG.

For a more detailed example see MDN

Inline CSS style

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build a small SVG with a rectangle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc <- svg_doc(width = 240, height = 100)
doc$title("Inline CSS style")
doc$rect(x=0, y=0, width=240, height = 100, stroke='black', fill='white', stroke_width = 1)
doc$rect(id = 'myrect', x = 80, y=20, width=80, height=60, fill = 'yellow')
doc$rect(class = 'rect-two', x = 130, y=20, width=80, height=60)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Add a CSS style block to the SVG document. CSS definitions will override
# any inline definitions defined above
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$add_css("
#myrect {
  fill: green;
}")

doc$add_css("
.rect-two {
  stroke: black;
  fill-opacity: 0.2;
  stroke-width: 4;
}")

Show SVG text (click to open)

print(doc)

if (interactive()) {
  doc$show()
} else {
  doc
}

Inline CSS style

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Build a small SVG with a rectangle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc <- svg_doc(width = 240, height = 100)
doc$title("External CSS File")
doc$rect(x=0, y=0, width=240, height = 100, stroke='black', fill='white', stroke_width = 1)
doc$rect(id = 'myrect', x = 80, y=20, width=80, height=60, fill = 'yellow')
doc$rect(class = 'rect-two', x = 130, y=20, width=80, height=60)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Write some CSS to a file
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
css <- "
#myrect {
  fill: green;
}

.rect-two {
  stroke: black;
  fill-opacity: 0.2;
  stroke-width: 4;
}"

writeLines(css, "css/external.css")


#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Link the external CSS file into the SVG
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$add_css_url("css/external.css")

Show SVG text (click to open)

print(doc)

if (interactive()) {
  doc$show()
} else {
  doc
}

coolbutuseless/minisvg documentation built on May 2, 2020, 3:15 a.m.