- Notifications
You must be signed in to change notification settings - Fork2
SVGs in R
License
Unknown, MIT licenses found
Licenses found
rich-iannone/omsvg
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Scalable vector graphics, SVGs, arefantastic. Theomsvg packagelets you make SVGs using theR programming language, and, it triesto make the whole process a little less difficult. We can create SVGelements, transform them programmatically, apply filters, and evenanimate them.
The process of usingomsvg begins with theSVG() function. Thatallows you to define the overall size of the graphic and set some globaloptions. Let’s start simple and make an SVG with three elements: (1) arectangle, (2) an ellipse, and (3) some text. To do this, we’ll use thesvg_rect(),svg_ellipse(), andsvg_text() functions.
svg<- SVG(width=250,height=100) %>% svg_rect(x=25,y=25,width=50,height=50,fill="yellow") %>% svg_ellipse(x=125,y=50,width=50,height=50,stroke="magenta") %>% svg_text(x=175,y=50,text="this is text",attrs= svg_attrs_pres(font_family="Helvetica"))
#> <svg width="250" height="100">#> <rect x="25" y="25" width="50" height="50" fill="yellow"/>#> <ellipse cx="125" cy="50" rx="25" ry="25" stroke="magenta"/>#> <text x="175" y="50" font-family="Helvetica">this is text</text>#> </svg>
Aside from rectangles, ellipses, and text, we can also elect to usecircles (svg_circle()), lines (svg_line()),polylines(svg_polyline()), polygons (svg_polygon()), andas-complex-as-you-can-make-’em paths (svg_path()).
One thing that’s really great about SVGs is that they can be animated,and, almost everything in an SVG is animatable. Theomsvg packagelets us animate each element with minimal frustration. Here is anexample of a rectangle being quite animated.
svg_rectangle_anim<- SVG(width=700,height=150) %>% svg_rect(x=100,y=75,width=100,height=100,stroke="cyan",fill="lightblue",anims= anims(0.5~list( anim_position(initial=TRUE), anim_rotation(initial=TRUE) ),2.0~list( anim_position(x=500,y=75,easing_fn= ease_in_out()), anim_rotation(90,easing_fn= ease_in_out()) ) ) )
#> <svg width="700" height="150">#> <style>#> @keyframes anim_position_000001 {#> 0% {#> transform: translate(100px, 75px);#> animation-timing-function: linear();#> }#> 25% {#> transform: translate(100px, 75px);#> animation-timing-function: linear();#> }#> 100% {#> transform: translate(500px, 75px);#> animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);#> }#> }#> #> @keyframes anim_rotation_000001 {#> 0% {#> transform: rotate(0deg);#> animation-timing-function: linear();#> }#> 25% {#> transform: rotate(0deg);#> animation-timing-function: linear();#> }#> 100% {#> transform: rotate(90deg);#> animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);#> }#> }#> #> @keyframes anim_anchor_000001 {#> 0% {#> transform: translate(-50px, -50px);#> }#> 100% {#> transform: translate(-50px, -50px);#> }#> }#> </style>#> <g>#> <g>#> <g>#> <rect width="100" height="100" stroke="cyan" fill="lightblue"/>#> </g>#> </g>#> </g>#> </svg>
Animations are made through reference to keyframe times. Each of thesetimes (in seconds) is like a transition point. Above, the rectangle isheld at its initial position and rotation state until0.5 seconds haselapsed. At2.0 seconds, the second keyframe, the rectangle’s positionis to be moved from{x = 100, y = 100} to{x = 500, y = 100}, and,its rotation state should change to90 degrees. We can assign atiming function that governs the tweening of the animation. For theposition and rotation changes, these are both using theease_in_out()timing function (where movement eases into a maximum speed and thendecelerates to a stop).
Theomsvg package is available in CRAN and can be installed with:
install.packages("omsvg")You can install the development version fromGitHub with:
# install.packages("devtools")devtools::install_github("rich-iannone/omsvg")
About
SVGs in R
Topics
Resources
License
Unknown, MIT licenses found
Licenses found
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.