# Using SVGs on Canvas with Compose Multiplatform

DevFeed: [Using SVGs on Canvas with Compose Multiplatform](<https://devfeed.tech/articles/using-svgs-on-canvas-with-compose-multiplatform-38499.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2025-01-15/using-svgs-on-canvas-with-compose-multiplatform/>)

Author: Eevis Panula

Published: 2025-06-11T04:09:33.844000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [compose-multiplatform](<https://devfeed.tech/topics/compose-multiplatform.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [creative technology](<https://devfeed.tech/topics/creative-technology.md>), [Figma](<https://devfeed.tech/topics/figma.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-multiplatform](<https://devfeed.tech/tags/compose-multiplatform.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [developer-tools](<https://devfeed.tech/tags/developer-tools.md>), [figma](<https://devfeed.tech/tags/figma.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

This tutorial explains how to use SVG path data to draw SVG components on Canvas in a Compose Multiplatform application. It covers extracting path data from SVG source, storing paths with color information, and preparing them for rendering on Android and iOS.

## Source excerpt

One thing that has continued to amaze me with building my Compose Multiplatform app is how easily everything has worked with Canvas. When I started building Neule.art, I assumed that Canvas would cause some problems, but it has worked smoothly on both Android and iOS. I've been writing posts about creative coding on Canvas (see, for example, Not a Phase - Text with Compose and Canvas), and also about my First Impressions of Compose Multiplatform, and this post combines elements from both themes. There are different ways to parse an SVG to be used with Compose, and in this blog post, I'm looking into using path data. This approach requires some manual work, but it also allows better flexibility for controlling, e.g., colors of the individual elements within the SVG. What We're Building Even though I'd love to show how I've built the shirt I'm using in Neule.art, simplifying the process into the form of a blog post is too difficult a task. I decided to create a smaller SVG, which we're going to convert into Canvas. It looks like this: The hearts I'm using in the SVG are from Sarah Laroche's Vector Heart Figma resource. And if you've ever seen the colors anywhere, you might recognize them as being from the non-binary flag. Getting the Paths from an SVG We first need something from the original SVG to draw it on Canvas: the paths of individual components within the SVG. In an SVG, the path's d-attribute contains the commands for defining the shape being drawn, and we're using that to parse the SVG to the path on Canvas. If you're unfamiliar with SVGs, I recommend checking MDN's documentation on SVGs, as it contains much in-depth information about SVGs. So, to prepare for drawing paths on Canvas, we'll need an SVG image as code. Then, we need to copy the path's d-attribute's content and finally store them somewhere inside our code. There are several options for opening the SVG's code - for example, open the file in an IDE or inspect it in the browser's developer tools. I