Skip to content

Latest commit

 

History

History
118 lines (83 loc) · 5.06 KB

inline-svg.md

File metadata and controls

118 lines (83 loc) · 5.06 KB
Raw

Inline SVG slide (experimental)

!> 📐 This feature is experimental because of a strange rendering in WebKit browsers.

When you set inlineSVG: true in Marpit constructor option, each <section> elements are wrapped with inline SVG.

<svg data-marpit-svg viewBox="0 0 1280 960">
  <foreignObject width="1280" height="960">
    <section><h1>Page 1</h1></section>
  </foreignObject>
</svg>
<svg data-marpit-svg viewBox="0 0 1280 960">
  <foreignObject width="1280" height="960">
    <section><h1>Page 2</h1></section>
  </foreignObject>
</svg>

Options

inlineSVG constructor option also allows setting the option object. Refer to Marpit API documentation for details.

Motivation

You may feel it a bit strange. Why we have taken this approach?

Pixel-perfect scaling

You may delegate a logic of pixel-perfect scaling for slide page to SVG. You have to do is only defining a size for viewing.

/* Fit slide page to viewport */
svg[data-marpit-svg] {
  display: block;
  width: 100vw;
  height: 100vh;
}

Developer can handle the slide much easier in Marpit integrated apps.

@marp-team/marp-core, has extended from Marpit, has useful auto-scaling features that are taken this advantage.

!> WebKit cannot scale HTML elements in <foreignObject> (Bug 23113). You can mitigate by polyfill.

JavaScript not required

Marpit's scaffold style has defined scroll-snap-align declaration to section elements. They can align and fit to viewport by defining scroll-snap-type to the scroll container. (CSS Scroll Snap)

Thus, a minimal web-based presentation no longer requires JavaScript. We strongly believe that keeping logic-less is important for performance and maintaining framework.

By using Marpit, @marp-team/marp-cli can output HTML file for presentation that is consisted of only HTML and CSS.

npm i -g @marp-team/marp-cli
npm i @marp-team/marpit

marp --template bare --engine @marp-team/marpit marpit-deck.md

Isolated layer

Marpit's advanced backgrounds will work within the isolated <foreignObject> from the content. It means that the original Markdown DOM structure per page are keeping.

If advanced backgrounds were injected into the same layer as the Markdown content, inserted elements may break CSS selectors like :first-child pseudo-class and adjacent combinator (+).

Webkit polyfill

We provide a polyfill for WebKit based browsers in @marp-team/marpit-svg-polyfill.

<svg data-marpit-svg viewBox="0 0 1280 960">
  <foreignObject width="1280" height="960">
    <section><h1>Page 1</h1></section>
  </foreignObject>
</svg>

<!-- Apply polyfill -->
<script src="https://cdn.jsdelivr.net/npm/@marp-team/marpit-svg-polyfill/lib/polyfill.browser.js"></script>

::backdrop CSS selector

If enabled inline SVG mode, Marpit theme CSS and inline styles will redirect ::backdrop CSS selector to the SVG container.

A following rule matches to <svg data-marpit-svg> element.

::backdrop {
  background-color: #448;
}

Some of Marpit integrated apps treats the background of SVG container as like as the backdrop of slide. By setting background style to the SVG container, you can change the color/image of slide letterbox/pillarbox.

Try resizing SVG container in below:

!> ::backdrop pseudo-element does not limit applicable styles. To avoid unexpected effects into slides and apps, we strongly recommend to use this selector only for changing the backdrop color.

Disable

If concerned conflict with styles for SVG container provided by app you are creating, you can disable ::backdrop selector redirection separately by setting backdropSelector option as false.

const marpit = new Marpit({
  inlineSVG: { backdropSelector: false },
})