Follow

a quick multipage svg demo
(lightweight alternative to pdf)
yip.pe/content/svgpager.html

· · Web · 2 · 9 · 9

how does it work?
the whole document is one single flat svg with each page arranged horizontally next to each other as a big row of pages.

the pages can in fact be arranged in whatever layout you feel like.

<view> elements are added with viewBox attributes corresponding to where each page is and id attributes which we use later as fragment identifiers in the links

the svg is loaded into an iframe, so we can give the iframe a name attribute which we match as the target of each link.

the links *could* be embedded into the svg, with the drawback being that they won’t work unless the svg is loaded into a page as an object element, or visited directly.

using such an svg to print multipage documents: i have no idea if anyone has written any tools to generate or read svg files formatted in this way, but such tools would be almost trivial to write. single pages can be “extracted” from the svg by copying the viewbox over the top of the viewbox in the root svg element, and each svg page printed seperately if necessary.

svg is not the native command code language of any printer that i am aware of, but converting svg to postscript wouldn’t need a huge dependency if such a tool were written efficiently.

So just a little reminder: SVG supports multiple pages just like PDF and postscript. It just lacks…. TOOL support. In this thread I demo how to add multiple pages to your SVGs by hand.

here's an example with internal links, not depending on external html "machinery" to drive it. You can just drop this svg into an object element and it will work
yip.pe/content/svgpager-intern

and the svg can be visited directly.
(with a few interesting quirks)
yip.pe/content/multipage-with-

@zens
svg is a graphical format for vectorial images.
Tried inkscape?

@zens this is so cool! I need a program that can do SVG slideshows

@zens this is really elegant. no-js slide decks? click and point adventures?

@milofultz thanks but it’s really just reading the documents and using features that are rarely used

@zens totally! I think the cleverness is utilizing the things that seem left behind by the rest of the internet. No need to reinvent the wheel when it's all built in to this huge VM we all lug around

@zens This is so cool. I've done alot of work with svgs in the past because they're cool and I passionately hate pdf but had never considered the possibility of svg as a pdf alternative...

Sign in to participate in the conversation
Merveilles

Revel in the marvels of the universe. We are a collective of forward-thinking individuals who strive to better ourselves and our surroundings through constant creation. We express ourselves through music, art, games, and writing. We also put great value in play. A warm welcome to any like-minded people who feel these ideals resonate with them.