SVG Backend

The SVG backend draws Doodle pictures to SVG in the browser using Scala JS, and writes them to files on the JVM.

Usage

Firstly, bring everything into scope

import doodle.svg.*

Now what you can do depends on whether you are running in the browser or on the JVM.

Running in the Browser

In the browser you can draw a picture to SVG. To do this, construct a Frame with the id of the DOM element where you'd like the picture drawn.

For example, if you have the following element in your HTML

<div id="svg-root"></div>

then you can create a Frame referring to it with

val frame = Frame("svg-root")

Now suppose you have a picture called thePicture. You can draw it using the frame you just created like so

thePicture.drawWithFrame(frame)

The rendered SVG will appear where the element is positioned on your web page.

To keep the SVG's blending separate from the surrounding page, set CSS isolation on the frame:

import doodle.svg.effect.Isolation
val isolatedFrame = doodle.svg.Frame("svg-root").withIsolation(Isolation.Isolate)

Sometimes you don't want Doodle to put the SVG on the page for you. You might want to add your own elements to it first, or choose yourself when and where it appears. In that case render to a Tag instead.

import doodle.svg.effect.SvgRenderer

SvgRenderer.renderToTag(frame, thePicture)

This gives you an IO of a ScalaTags Tag, along with the picture's result. Nothing is added to the page. Call .render on the Tag when you want a DOM element to insert or manipulate.

The frame's id is ignored here, as nothing is drawn to the screen, but its size, background and isolation still apply to the SVG you get back.

Running on the JVM

On the JVM you can't draw SVG to the screen. Use the java2d backend for that. However you can write SVG output, as described in writing to a file. Here's a simple example.

import cats.effect.unsafe.implicits.global
import doodle.core.*
import doodle.core.format.*
import doodle.syntax.all.*

val circle = Picture.circle(100)
  .strokeWidth(10.0)
  .fillColor(Color.crimson)
  
circle.write[Svg]("circle.svg")