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)

   <?xml version="1.0" encoding="UTF-8"?>
   <svg width="240" height="100" viewBox="0 0 240 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style type='text/css'>
   <![CDATA[
   
   #myrect {
     fill: green;
   }
   
   .rect-two {
     stroke: black;
     fill-opacity: 0.2;
     stroke-width: 4;
   }
   ]]>
   </style>
     <title>
       Inline CSS style
     </title>
     <rect stroke="black" fill="white" stroke-width="1" x="0" y="0" width="240" height="100" />
     <rect id="myrect" fill="yellow" x="80" y="20" width="80" height="60" />
     <rect class="rect-two" x="130" y="20" width="80" height="60" />
   </svg>

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)

   <?xml version="1.0" encoding="UTF-8"?>
   <svg width="240" height="100" viewBox="0 0 240 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style type='text/css'>
   <![CDATA[
   @import url(css/external.css);
   
   ]]>
   </style>
     <title>
       External CSS File
     </title>
     <rect stroke="black" fill="white" stroke-width="1" x="0" y="0" width="240" height="100" />
     <rect id="myrect" fill="yellow" x="80" y="20" width="80" height="60" />
     <rect class="rect-two" x="130" y="20" width="80" height="60" />
   </svg>

Styling SVG with CSS

Introduction

Inline CSS style

Inline CSS style