Drawing and modifying SVG's

OPENRNDR How to?
1

Hi!
Are there any examples on how to draw multiple SVG’s and choosing a different fill for each? I have tried drawing with the ‘drawer.composition()’ but nothing shows up.
Should I somehow access the data inside the composition to modify it?
Easiest for me would be if I could create a contour from an imported SVG. Is this possible?

2

Hi @myreauks :slight_smile: Welcome to the forum!

This can get you the shapes (or the contours if you prefer)

val svg = loadSVG("data/violin.svg")
val shapes = svg.findShapes().map { it.shape }
//val contours = shapes.map { it.contours }.flatten()

Then you can use the usual drawer.fill and drawer.stroke to specify the colors to use.

A reason to use shapes instead of contours is that holes, if present, are respected.

Does this get you going?

Cheers!

3

Thanks for the very fast reply! With that code I have some contours out of the SVG on my screen!

However, the SVG has multiple contours and they seem to be misaligned when drawn on the screen. Is this something that could be fixed by using shapes instead of contours? And can I still change the color if using shapes?

Thanks!
-Miro

4

Welcome :slight_smile:

You can change the colors of shapes the same way like with contours.

Are they also misaligned with shapes? Are you able to share a screenshot? Or paste a short program showing the issue?

Let me try… Ok, I see I made a mistake. I should have used it.effectiveShape instead of it.shape. That way scaling, rotation and translation are applied.

I tested with this SVG file. I colorized shapes based on the position of the center of each contour.

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.color.rgb
import org.openrndr.extensions.Screenshots
import org.openrndr.svg.loadSVG

fun main() = application {
    configure {
        width = 375
        height = 375
    }
    program {
        val svg = loadSVG("/tmp/eleven_below_single.svg").findShapes().map { it.effectiveShape }.map { it.contours }.flatten()
        extend(Screenshots())
        extend {
            drawer.stroke = ColorRGBa.BLACK.opacify(0.2)
            svg.forEach {
                val p = it.bounds.center
                drawer.fill = rgb(p.x % 1.0, p.y % 1.0, 0.0)
                drawer.contour(it)
            }
        }
    }
}

image
Original

SVGtest-2023-10-26-18.04.52
Transformed

5

Thanks for the further explanation.

The scrambling only happens with some SVG’s it seems. Here is a simple test program:

fun main() = application {
    configure {
        width = 1280
        height = 800
    }
    oliveProgram {

        val svg = loadSVG("data/arrow.svg")
        val shapes = svg.findShapes().map { it.shape }
        val contours = shapes.map { it.contours }.flatten()

        extend {

            drawer.fill = ColorRGBa.RED
//            drawer.translate(width/2.0, height/2.0)

            contours.forEach {
                drawer.contour(it)
            }

        }
    }
}

On top is what the arrow should look like (don’t mind the colors) and on bottom what it looks like in the program

image
image784×1656 30.2 KB

I’m still trying to figure out how to upload the SVG here on the forum.

EDIT:
Here’s a limited time download link to the SVG: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

6

In your code example you didn’t use it.effectiveShape. Maybe you didn’t notice that I edited my post mentioning that? :slight_smile:

7

Okay that made it work! Silly me.
Thanks for all the very fast help!