[Feature Request] SVG Support

[ThatOtherAndrew]

Currently, transcluded bitmap images appear to work fine when publishing, however SVG images do not. Having support for this would be incredibly helpful if possible.

[oleeskild]

SVG should work, by using the normal ![[filename.svg]] syntax. Do you have an example of this not working?

[ThatOtherAndrew]

notes.thatother.dev/physics/magnetic-fields has an example if this not working - I've also attached screenshots below to demonstrate the difference.

Live preview in Obsidian:

Source mode in Obsidian:

Digital garden rendered result:

[oleeskild]

Ah, right. So this is an excalidraw.svg file. That is currently not supported. How was that file created? Normally an excalidrawing is an .md file. Is there an option in excalidraw to save the image as an svg or something?

[ThatOtherAndrew]

That is correct, in the three dots menu of an Excalidraw drawing there is an option to export as SVG. I've been rendering my drawings to static graphics instead of directly publishing them, because the interactive frame of a transcluded Excalidraw drawing can be a little annoying when scrolling and very slow to load on some machines. Do their SVGs not conform to the standard?

[oleeskild]

I've looked into this @ThatOtherAndrew , and it is working for me. I used the "Save as SVG into Vault" option in Excalidraw, and used the ![[name of file.excalidraw.svg]] syntax.

I've just released version 2.25.1 that handles the image width syntax for svgs (![[name.excalidraw.svg|400). Maybe that had some side effects that I haven't thought of, and thats why it's working for me now. Could you perhaps try again, and see if it works for you as well with the latest version?

[ThatOtherAndrew]

@oleeskild I've tried again, and it still seems to be acting up for me. I am still witnessing this behaviour, and the issue is resolved when using PNGs instead of SVGs.

[oleeskild]

@ThatOtherAndrew Looking at the file in your repo there is something weird going on. You may have enabled some sort of compression or something. When the plugin finds an embedded SVG, it simply reads the file and inserts the content into the note file pushed to github.

Looking at your note, it seems like the svg file, isn't really an SVG but a style tag defining a font. Could you perhaps open the SVG file you have embedded in a text editor, and post the content?

[ThatOtherAndrew]

The contents are available at hatebin.com/qktwezbtif. The contents look a bit funny, however my browser is able to read the SVG just fine.

After having a dig in Excalidraw settings, I've noticed some compression settings which may be relevant. I'll try turning off everything compression-related and report back here.

[ThatOtherAndrew]

Update: It appears the compression setting is for .excalidraw.md files only, and does not affect exported SVGs. I have no idea why my exported file is encoded so strangely.

[pawelel]

Noticed that different svg files might behave differently and not all of them can be applied to netlify. Based on my experience with favicon change issues - I had to flatten image to get rid of the issue:

12:54:16 AM: > web@1.0.0 build:eleventy
12:54:16 AM: > cross-env ELEVENTY_ENV=prod NODE_OPTIONS=--max-old-space-size=4096 eleventy
12:54:17 AM: [11ty] Problem writing Eleventy templates: (more in DEBUG output)
12:54:17 AM: [11ty] 1. Having trouble rendering njk template ./src/site/index.njk (via TemplateContentRenderError)
12:54:17 AM: [11ty] 2. (./src/site/index.njk)
12:54:17 AM: [11ty]   Template render error: (/opt/build/repo/src/site/_includes/components/pageheader.njk)
12:54:17 AM: [11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `favicon` (via Template render error)
12:54:17 AM: [11ty] 3. Expected number between 1 and 100000 for density but received 0.8787185354691076 of type number (via Template render error)
12:54:17 AM: [11ty]
12:54:17 AM: [11ty] Original error stack trace: Error: Expected number between 1 and 100000 for density but received 0.8787185354691076 of type number
12:54:17 AM: [11ty]     at Object.invalidParameterError (/opt/build/repo/node_modules/sharp/lib/is.js:124:10)
12:54:17 AM: [11ty]     at Sharp._createInputDescriptor (/opt/build/repo/node_modules/sharp/lib/input.js:80:18)
12:54:17 AM: [11ty]     at new Sharp (/opt/build/repo/node_modules/sharp/lib/constructor.js:298:29)
12:54:17 AM: [11ty]     at Sharp (/opt/build/repo/node_modules/sharp/lib/constructor.js:137:12)
12:54:17 AM: [11ty]     at /opt/build/repo/node_modules/eleventy-favicon/.eleventy.js:14:7
12:54:17 AM: [11ty]     at Array.map (<anonymous>)
12:54:17 AM: [11ty]     at generateIcoFavicon (/opt/build/repo/node_modules/eleventy-favicon/.eleventy.js:13:23)
12:54:17 AM: [11ty]     at /opt/build/repo/node_modules/eleventy-favicon/.eleventy.js:55:9
12:54:17 AM: [11ty]     at Array.forEach (<anonymous>)
12:54:17 AM: [11ty]     at Object.<anonymous> (/opt/build/repo/node_modules/eleventy-favicon/.eleventy.js:54:20)
12:54:18 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
12:54:17 AM: [11ty] Benchmark    289ms  32%     1× (Data) `./src/site/_data/meta.js`
12:54:17 AM: [11ty] Wrote 0 files in 0.63 seconds (v1.0.2)
12:54:17 AM: ERROR: "build:eleventy" exited with 1.
12:54:17 AM: ​
12:54:17 AM:   "build.command" failed                                        
12:54:17 AM: ────────────────────────────────────────────────────────────────
12:54:17 AM: ​
12:54:17 AM:   Error message
12:54:17 AM:   Command failed with exit code 1: npm install && npm run build (https://ntl.fyi/exit-code-1)

The svg wasn't uploaded and that caused build fail every time I wanted to change favicon until cleaning up the file with free online svg tool.

[uroybd]

Ideally, #186 should fix this since transcluded images will be uploaded and referred to instead of embedded.

[ThatOtherAndrew]

Ideally, #186 should fix this since transcluded images will be uploaded and referred to instead of embedded.

@uroybd Just checked, and the issue still persists. I tried using an Excalidraw-exported SVG again and it resulted in the page breaking as shown below:

[uroybd]

Ideally, #186 should fix this since transcluded images will be uploaded and referred to instead of embedded.

@uroybd Just checked, and the issue still persists. I tried using an Excalidraw-exported SVG again and it resulted in the page breaking as shown below:

Please provide a sample file.

[ThatOtherAndrew]

@uroybd Sure thing - here's the page, original Excalidraw file and exported SVG:

General Relativity.md General Relativity_2.excalidraw.md General Relativity_2.excalidraw.svg

[uroybd]

It seems like the linked files are png, not svg. Am I missing something?

[ThatOtherAndrew]

Sorry, I had changed the link back to fix my site in the meantime, and forgot about that when uploading the sample file. The issue occurs when any of the links are changed to SVG instead of PNG - here's the corrected file. General Relativity.md

[uroybd]

Hm, I see. We're still inlining the SVG. @oleeskild we can just upload them like other images, can't we?