Placing SVG inline in HTML generated from Markdown

Placing SVG inline in HTML generated from Markdown

[James Hoyland]

[-- Attachment #1.1: Type: text/plain, Size: 1274 bytes --]

Hello all,
New to pandoc and loving it. So I am using it to generate HTML snippets 
from markdown to copy and paste in a learning management system (Moodle). 
Now this works, I can produce nice HTML, I can use MathJax and get 
equations in there, I can also link images which get base64 encoded - all 
works great. I need to use the base64 encoding because it's a pain to link 
the images as separate files from within Moodle. However one thing I'd like 
to do - I make diagrams in Inkscape and link the SVG files into the the 
Markdown, Pandoc also base64 encodes the SVG - at first I thought it was 
rasterizing them but I can right click download them from the website and 
they are still SVG just embedded as a base64 encoded image tag. I would 
prefer if pandoc took the SVG and just inlined it in the resulting HTML as 
an SVG tag. Is this possible?

James

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/e12cd704-7d33-4762-8728-d9c7adaff13do%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 1611 bytes --]

Re: Placing SVG inline in HTML generated from Markdown

[Albert Krewinkel]

James Hoyland writes:

> However one thing I'd like to do - I make diagrams in Inkscape
> and link the SVG files into the the Markdown, Pandoc also base64
> encodes the SVG - at first I thought it was rasterizing them but
> I can right click download them from the website and they are
> still SVG just embedded as a base64 encoded image tag. I would
> prefer if pandoc took the SVG and just inlined it in the
> resulting HTML as an SVG tag. Is this possible?

Giving my default answer here: that'd be doable with a pandoc
(Lua) filter: traverse all Image elements and check whether it
links to a SVG file. If it does, replace it with raw SVG code.
Pseudo code:

    function Image (img)
      if img.src:match '.*^.svg$' then
        local contents = io.open(img.src):read '*a'
        return pandoc.RawInline('html', contents)
      end
    end

This may be a little too simple as the SVG file might start with a
`<?xml ...?>` line, which should be removed. But that should be
only another line or two.

--
Albert Krewinkel
GPG: 8eed e3e2 e8c5 6f18 81fe  e836 388d c0b2 1f63 1124

Re: Placing SVG inline in HTML generated from Markdown

[Gwern Branwen]

If Pandoc 'just' inlines the SVG, what specifies its size,
positioning, and so on? The point of SVG is that unlike raster
graphics, it's flexible and can be any size and scale and be
manipulated in many ways. Is there default Pandoc CSS which already
covers all of that?

-- 
gwern
https://www.gwern.net

Re: Placing SVG inline in HTML generated from Markdown

[James Hoyland]

[-- Attachment #1.1: Type: text/plain, Size: 1729 bytes --]

Thanks! I guess  I will have to look into that - I have not used filters yet

James

On Thursday, 13 August 2020 10:48:25 UTC-7, Albert Krewinkel wrote:
>
>
> James Hoyland writes: 
>
> > However one thing I'd like to do - I make diagrams in Inkscape 
> > and link the SVG files into the the Markdown, Pandoc also base64 
> > encodes the SVG - at first I thought it was rasterizing them but 
> > I can right click download them from the website and they are 
> > still SVG just embedded as a base64 encoded image tag. I would 
> > prefer if pandoc took the SVG and just inlined it in the 
> > resulting HTML as an SVG tag. Is this possible? 
>
> Giving my default answer here: that'd be doable with a pandoc 
> (Lua) filter: traverse all Image elements and check whether it 
> links to a SVG file. If it does, replace it with raw SVG code. 
> Pseudo code: 
>
>     function Image (img) 
>       if img.src:match '.*^.svg$' then 
>         local contents = io.open(img.src):read '*a' 
>         return pandoc.RawInline('html', contents) 
>       end 
>     end 
>
> This may be a little too simple as the SVG file might start with a 
> `<?xml ...?>` line, which should be removed. But that should be 
> only another line or two. 
>
> -- 
> Albert Krewinkel 
> GPG: 8eed e3e2 e8c5 6f18 81fe  e836 388d c0b2 1f63 1124 
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/ccef867e-de59-4986-9e9e-b2b27e15c3d1o%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 2353 bytes --]

Re: Placing SVG inline in HTML generated from Markdown

[John MacFarlane]

When you say pandoc base64 encodes the SVGs -- are you using
the --self-contained option?  Normally you'd just get a link
to an external image.

James Hoyland <hoyland.jd-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> writes:

> Hello all,
> New to pandoc and loving it. So I am using it to generate HTML snippets 
> from markdown to copy and paste in a learning management system (Moodle). 
> Now this works, I can produce nice HTML, I can use MathJax and get 
> equations in there, I can also link images which get base64 encoded - all 
> works great. I need to use the base64 encoding because it's a pain to link 
> the images as separate files from within Moodle. However one thing I'd like 
> to do - I make diagrams in Inkscape and link the SVG files into the the 
> Markdown, Pandoc also base64 encodes the SVG - at first I thought it was 
> rasterizing them but I can right click download them from the website and 
> they are still SVG just embedded as a base64 encoded image tag. I would 
> prefer if pandoc took the SVG and just inlined it in the resulting HTML as 
> an SVG tag. Is this possible?
>
> James
>
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/e12cd704-7d33-4762-8728-d9c7adaff13do%40googlegroups.com.

Re: Placing SVG inline in HTML generated from Markdown

[James Hoyland]

[-- Attachment #1: Type: text/plain, Size: 2382 bytes --]

Yes I'm using self contained. I'm doing this because I want to avoid links.
The method for uploading and linking to images in Moodle is awkward to say
the least so having a single block of HTML to copy and paste into the
editor is a real time saver.

James

On Sun, Aug 16, 2020, 10:48 AM John MacFarlane <jgm-TVLZxgkOlNX2fBVCVOL8/A@public.gmane.org> wrote:

>
> When you say pandoc base64 encodes the SVGs -- are you using
> the --self-contained option?  Normally you'd just get a link
> to an external image.
>
> James Hoyland <hoyland.jd-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> writes:
>
> > Hello all,
> > New to pandoc and loving it. So I am using it to generate HTML snippets
> > from markdown to copy and paste in a learning management system
> (Moodle).
> > Now this works, I can produce nice HTML, I can use MathJax and get
> > equations in there, I can also link images which get base64 encoded -
> all
> > works great. I need to use the base64 encoding because it's a pain to
> link
> > the images as separate files from within Moodle. However one thing I'd
> like
> > to do - I make diagrams in Inkscape and link the SVG files into the the
> > Markdown, Pandoc also base64 encodes the SVG - at first I thought it was
> > rasterizing them but I can right click download them from the website
> and
> > they are still SVG just embedded as a base64 encoded image tag. I would
> > prefer if pandoc took the SVG and just inlined it in the resulting HTML
> as
> > an SVG tag. Is this possible?
> >
> > James
> >
> > --
> > You received this message because you are subscribed to the Google
> Groups "pandoc-discuss" group.
> > To unsubscribe from this group and stop receiving emails from it, send
> an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> > To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/e12cd704-7d33-4762-8728-d9c7adaff13do%40googlegroups.com
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMcTw6Nys6Ed3%3Dd-iWUAjhuHM63VmOoX_pyoVN22%3DB3hZp_5mw%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 3523 bytes --]