Inline base64 data for SVG?

[karlll]

Hi!

I'm trying to understand the following:

I can export as html a slide containing an image given as inline base64 data,
![](data:image/png;base64....) and have it exported as an img tag with the src set to the corresponding data and rendering correctly. However, when the content type is data:image/svg+xml this doesn't work (the data is correctly encoded, valid and well-formed svg).

If I manually insert the svg base64 data in an img tag it will render as expected.

Any ideas?

Thanks!

/K

[yhatt]

Marp is using markdown-it as a Markdown parser, and unfortunately markdown-it does not have a support for SVG data image URI. And the author of markdown-it is opposed to changing this restriction.

• https://github.com/markdown-it/markdown-it/blob/2b6cac25823af011ff3bc7628bc9b06e483c5a08/lib/index.js#L33
• some image formats supplied as data URLs are not recognized markdown-it/markdown-it#447

If you want to render SVG data URI image in Marp, you have to use a raw <img> tag with enabling HTML, or use a plugin to allow SVG data URI as a recognizable URL (only in Marp CLI).

// engine.js for Marp CLI
module.exports = ({ marp }) => marp.use((md) => {
  // https://github.com/markdown-it/markdown-it/issues/447#issuecomment-373408654
  const defaultValidateLink = md.validateLink;
  md.validateLink = url => /^data:image\/.*?;/.test(url) || defaultValidateLink(url);
})

marp --engine engine.js your-markdown.md

[karlll]

Thanks @yhatt for the detailed answer!