Add SVG export feature to Canvas

Hello,

First, I wanted to thank the Obsidian team for the new Canvas feature. It just so easy, fluid and so convenient to use :slight_smile: It’s really a game changer !

Use case or problem

Canvas allows to export to PNG files but this format is not suitable to create and share clickable visuals.

This imposes to replicate the visual in a tool allowing export in a clickable format (Svg).

Proposed solution

Adding the ability to export in .svg files located (for example) in the triple dots menu “Export as SVG”.

Embed pages can only be exported for the content displayed in the frame of the box (the reste of the page that need to scroll down to be seen will not be displayed).

Such feature can also potentially help to promoting Obsidian more widely if visuals made with canvas are shared on social networks or with collegues or friends.

Current workaround (optional)

Currently, and as far as I know, some tools allow to create svg content like the very helpful and complete Excalidraw obsidian plugin by Zsolt Viczián.

However, as i am figuring out, Canvas can help to produce others types of content than those created in Excalidraw. For exemple, Canvas allows to link, organize and display existing obsidian pages without having to rewrite it.

26 Likes

Adding my support (and hearted the OP)! I sometimes print canvases, and output looks blocky and antialiased when exported to PNG:

The antialiasing is OK for a display, but it doesn’t look good when printed out.

Please consider adding SVG output from a Canvas to facilitate printing, embedding in websites, and other creative applications.

Thanks!

Craig

5 Likes

We strongly recommend you to search the forum with possible keywords before making a new feature request. If your request is very similar to an existing one, consider liking it and/or making a comment rather than making a new one. Once you’ve searched and determined that this is a new request, delete this line.

Use case or problem

I am trying to export my canvas and use it to create poster and will useful to be able to export it in other formats like SVG or even PNG but with a transparent background and to be able to choose about the quality that you wanna the image have, in order to be more flexible.

Current workaround (optional)

Currently I am trying to remove the background via procreate which takes a lot of time to do that.

Related feature requests (optional)

Overall more control and options while you exporting or use you canvas, about the overall size, the fonts and the quality of the image that you exporting, regardless what the size of the file will be.

2 Likes

YES, please. SVG would be the most important if you ask me! Also transparency / background options would be vital

4 Likes

Sorry MantisSachlas if I missed something but I found no equivalent request on SVG export options for canvas. I appreciate your suggestion of related feature but the quality of the image was not my point (even it’s one another great feature of SVG).

The need was more to export a canvas as a clikable image to be easily embedded as a website image or shared as a separated file. If it could also support transparent background as mentionned by Zettelstraum, this will be even better.

Because currently the only way to export an interactive infography created for PKM use (i.e clickable decision tree, clickable big picture of a ecosytem or chain of cause and effects) is to recreate it in a sofware dedicated to the creation of presentations or infographies.

This could also be a great opportunity to make Obsidian known to a wider audience or be appreciated by people who both create infographies fo their PKM and to be able to communicate them later (i.e. support function like human resource or legal department, researchers, students, etc)

1 Like

I get you mate :slight_smile:

For me the other hand I need the format to be able to put in more uses what I have done!

Hey there,

I came across this post as I was looking for such feature as well.

I am using Obsidian to build several Vuepress documentation sites. As part of a build script that converts wiki links to normal markdown links, I added several functions that render the .canvas files to .svg files.

Here is a blog post about converting canvas to svg: Janik von Rotz - Convert Obsidian canvas to SVG

And here is current build script: Wiki/build.js at dd7a75d98474717bb90092f83347e0c8caef157e · Mint-System/Wiki · GitHub

Note that there are no build dependencies. You can simply copy all the converter methods.

I had some problems with previewing entire markdown files.

4 Likes

@janikvonrotz, it seems your blog post changed it’s url, leaving link in your message broken. Here’s the new url: Janik von Rotz - Convert Obsidian canvas to SVG

1 Like

Signed up just to add more weight to this request :smiley:

We do need the vector format export for obsidian canvas. It uses HTML and SVG under the hood anyway, why not make it available for using outside of Obsidian?

Use case or problem:

I myself drew a scheme in canvas and really liked the provided design and colours, so i wanted to embed it to my GitHub repo’s README.MD as a scalable picture, but was very disappointed to find out that only PNG export is available.

If it has some limitations and hard barriers for such export, i think people would still be happy to have at least something to work with and edit the provided SVG file themselves to achieve the desired result :sweat_smile:

2 Likes

UPD: to those wandering here for any workable solution:
i discovered this: there is a plugin that allows for saving canvas into html, so

  1. install the HTML Export plugin: Plugins - Obsidian
  2. export your canvas as HTML
  3. open it in your browser and save the page as a PDF by right clicking it
  4. open it in Adobe Illustrator and export as SVG
    with this gruesome process i was able to get somewhat satisfiable SVG file. but still, it turned out to be 800kb (which is a lot for a vector file) and the fonts looked quite ugly. Still better then the PNG, if you ask me :see_no_evil:
3 Likes

Thanks, @AndrewM! Your solution is really very imaginative. However, it has now led me to create my diagram from scratch using my graphics program and then export it to an SVG file - apparently, that’s the fastest way to turn a canvas into SVG at the moment, unfortunately.

2 Likes

+1 on the SVG export feature