# Drawing and modifying SVG's **URL:** \ **Category:** How to?\ **Created:** [October 26, 2023, 12:55pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606 "2023-10-26T12:55:24Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![myreauks](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@myreauks](https://openrndr.discourse.group/u/myreauks)\ **Post date:** [October 26, 2023, 12:55pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/1 "2023-10-26T12:55:24Z")
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? ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [October 26, 2023, 2:00pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/2 "2023-10-26T14:00:47Z")
Hi @myreauks 🙂 Welcome to the forum! This can get you the shapes (or the contours if you prefer) ```auto 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! ---
**Author:** ![myreauks](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@myreauks](https://openrndr.discourse.group/u/myreauks)\ **Post date:** [October 26, 2023, 3:28pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/3 "2023-10-26T15:28:34Z")
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 ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [October 26, 2023, 3:44pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/4 "2023-10-26T15:44:19Z")
Welcome 🙂 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](https://www1.plurib.us/1shot/2008/eleven_below/eleven_below_single.svg). I colorized shapes based on the position of the center of each contour. ```auto 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](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/5bae35a6e547fe772df29bcc82745e270beb4e11.png) Original ![SVGtest-2023-10-26-18.04.52](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/c0c8c64fba8d333642cdb33fe69b00a7400b5dfa.png) Transformed ---
**Author:** ![myreauks](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@myreauks](https://openrndr.discourse.group/u/myreauks)\ **Post date:** [October 26, 2023, 5:02pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/5 "2023-10-26T17:02:57Z")
Thanks for the further explanation. The scrambling only happens with some SVG’s it seems. Here is a simple test program: ```auto 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](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/d812805e83a35448ad6d37dccaf54a65f93da9f7.png) 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](https://we.tl/t-3dw5PAgqUA) ---
**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\ **Post date:** [October 26, 2023, 9:59pm UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/6 "2023-10-26T21:59:25Z")
In your code example you didn’t use `it.effectiveShape`. Maybe you didn’t notice that I edited my post mentioning that? 🙂 ---
**Author:** ![myreauks](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@myreauks](https://openrndr.discourse.group/u/myreauks)\ **Post date:** [October 27, 2023, 6:25am UTC](https://openrndr.discourse.group/t/drawing-and-modifying-svgs/606/7 "2023-10-27T06:25:05Z")
Okay that made it work! Silly me. Thanks for all the very fast help!