Merge pull request #157 from jkrumbiegel/jk/no-forced-inline-svg

Don't force inlining of svgs

docs/src/.vitepress/config.mts

@@ -13,7 +13,12 @@ export default defineConfig({
   cleanUrls: true,
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }]],
-
+  vite: {
+    build: {
+      assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
+    }
+  },
+
   markdown: {
     math: true,
     config(md) {

docs/src/mime_examples.md

@@ -29,12 +29,20 @@ MediaOutput{MIME"image/png"}(read(joinpath(pathof(DocumenterVitepress) |> dirnam
 MediaOutput{MIME"image/jpeg"}(read(download("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Felis_silvestris_silvestris.jpg/519px-Felis_silvestris_silvestris.jpg")))
 ```
 
-```@example mime-examples
-MediaOutput{MIME"image/svg+xml"}("https://upload.wikimedia.org/wikipedia/commons/6/6c/SVG_Simple_Icon.svg" |> download |> read)
-```
+Vite automatically inlines assets under 4KB by default, if this causes issues with your SVG files you can disable this behavior by adding the following to your vitepress configuration:
+
+::: info config.mts
+
+    vite: {
+        build: {
+            assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
+        }
+    },
+
+:::
 
 ```@example mime-examples
-MediaOutput{MIME"image/gif"}(read(download("https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif")))
+MediaOutput{MIME"image/svg+xml"}("https://upload.wikimedia.org/wikipedia/commons/6/6c/SVG_Simple_Icon.svg" |> download |> read)
 ```
 
 ```@example mime-examples

src/writer.jl

@@ -476,20 +476,34 @@ function render_mime(io::IO, mime::MIME"text/html", node, element, page, doc; kw
     println(io, element)
 end
 
-function render_mime(io::IO, mime::MIME"image/svg+xml", node, element, page, doc; kwargs...)
-    # NOTE: It seems that we can't simply save the SVG images as a file and include them
+function render_mime(io::IO, mime::MIME"image/svg+xml", node, element, page, doc; md_output_path, kwargs...)
+    # NOTE: It seems that we can't always simply save the SVG images as a file and include them
     # as browsers seem to need to have the xmlns attribute set in the <svg> tag if you
     # want to include it with <img>. However, setting that attribute is up to the code
     # creating the SVG image.
-    image_text = element
-    # Additionally, Vitepress complains about the XML version and encoding string below,
-    # so we just remove this bad hombre!
-    bad_hombre_string = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" |> lowercase
-    location = findfirst(bad_hombre_string, lowercase(image_text))    
-    if !isnothing(location) # couldn't figure out how to do this in one line - maybe regex?  A question for later though.
-        image_text = replace(image_text, image_text[location] => "")
+    has_xml_namespace = match(r"<svg[^>].*?xmlns\s*=", element) !== nothing
+
+    if has_xml_namespace
+        filename = String(rand('a':'z', 7))
+        write(
+            joinpath(
+                doc.user.build,
+                md_output_path,
+                dirname(relpath(page.build, doc.user.build)),
+                "$(filename).svg"
+            ),
+            element
+        )
+        println(io, "![]($(filename).svg)")
+    else
+        # Vitepress complains about the XML version and encoding string when used as an inline svg
+        # so we remove that
+        image_text = replace(
+            element,
+            r"<\?xml.*?>\s*"i => ""
+        )
+        println(io, "<img src=\"data:image/svg+xml;base64," * base64encode(image_text) * "\"/>")
     end
-    println(io, "<img src=\"data:image/svg+xml;base64," * base64encode(image_text) * "\"/>")
 end
 
 function render_mime(io::IO, mime::MIME"image/png", node, element, page, doc; md_output_path, kwargs...)