Re: SVG pagination

Hi Julien,

I've been thinking about a solution to your problem, but didn't want to
reply until I had a proof-of-concept demo working!

There is no native way to define page (or column/region) breaks within SVG.

The old reference to multi-page SVG that you found likely relates to a
proposal from the (never finalized) SVG1.2 specs.  That proposal is
described here: http://www.w3.org/TR/2004/WD-SVG12-20041027/multipage.html

However, that proposal would not have addressed your need for a "breakable"
SVG graphic.  Instead, it outlined a way to store multiple, distinct,
graphics within a single file.  On screen, they would display as a slide
show, controlled by animation attributes.  In print, they would display as
separate pages.  There was no way to have a large, scrollable on-screen
graphic that printed as multiple pages.  In fact, the proposal specifically
prohibited re-using elements between pages in order to optimize memory use.

Therefore, if you're asking as a user agent implementer—what is the correct
way to break large SVGs—the answer is that it is not specified.

However, if you're asking as an author—how do I break my large SVGs neatly
across pages—the answer is that you would have to use an HTML5 or XHTML
document.

By explicitly defining the separate pages as separate SVG elements within
HTML, not only can you have multiple distinct SVG elements, but they can
each reuse the same core graphic content.  By adding a viewBox attribute,
you can pan and zoom that graphic to the appropriate position for that page.

Explore my demonstration of the concept (and read my caveats) here:

http://codepen.io/AmeliaBR/details/jKxJz/

Depending on your browser, you may have to save the contents of the results
iframe to a separate file in order to print out or preview the content with
proper print layout styles.

I found that I wasn't able to get the graphics to reliable scale to fit the
page across all browsers.  Even if I could, I still needed to explicitly
define the number of pages and their viewBox attributes in the markup.

If creating large, printable graphics is an important part of your web site
or service, you would probably want to create a JavaScript or server-side
solution.  The user would enter the page size and layout for printing, and
the script would generate a separate print-preview HTML page with the
correct number of SVG elements, sized appropriately.

Finally, since this is the SVG WG newslist:

The approach given above may work around the problem, but this isn't an
edge case situation.  If SVG is to be used for large-scale graphics and
maps, it would be useful to have a syntax within SVG to define preferred
coordinates for horizontal and vertical page breaks, and the preferred
degree of overlap between pages.

If there are any plans to re-examine the idea of SVG views, this discussion
would probably fit well within that topic.

-- Amelia Bellamy-Royds


On 21 October 2014 10:25, Julien Chaffraix <jchaffraix@chromium.org> wrote:

> Hi,
>
> I was trying to determine the rules for breaking SVG content across
> fragments and couldn't find anything relevant in the CSS 3
> fragmentation or the SVG 2 specification.
>
> I only found an old discussion about this topic [1] but it doesn't
> really define the details (e.g. is SVG content unbreakable if embedded
> in some CSS paginated content?)
>
> Any help would be helpful!
>
> Thanks,
> Julien
>
> [1]
> https://groups.yahoo.com/neo/groups/svg-developers/conversations/topics/12178
>
>
>