Naomi Kennedy is here to gently guide you down the slippery slopes of the SVG image format as it pertains to ebooks. No prior SVG knowledge is required — Naomi will go over what it is, how and why it's used, and demo tools to create and edit these image files. March 18, 2019 ebookcraft.booknetcanada.ca #EbookCraft

1. The bunny slopes of
SVG mountain
A gentle introduction

2. Some prerequisite knowledge:
● EPUB structure
● EPUB support landscape
● XHTML and CSS
● Basic XML

3. Part 1: Some background
Part 2: SVG itself
Part 3: Let's play!

4. EPUB file:
https://goo.gl/pLzmsL

5. Part 1
Some Background

6. Scalable
Vector
Graphic

7. The SVG Spec
● SVG 1.1
○ Released in 2011
● SVG 2.0
○ Now a Candidate Recommendation (October 2018)
○ https://www.w3.org/TR/SVG2/
● Tiny SVG and Basic SVG
○ Subsets of SVG 1.1
○ Restricted features
○ https://www.w3.org/TR/2003/REC-SVGMobile-20030114/

8. Why use SVG
● Scalable
○ Readers can zoom in to see details with clarity
● XML based
○ Small file size
○ Processing power is a factor

9. SVG and EPUB
● Core Media Type
○ No fallback is required
● Can be used as a spine item
● Can be used as an object within an XHTML page
● Can be embedded in an XHTML file (recommended)
○ Include properties="svg" in the manifest declaration

10. A note on Accessibility
SVG is not accessible

11. A note on Accessibility
SVG is not accessible
as accessible as you make it

12. Part 2
SVG

13. Tools for today
● Your favored text editor (with XML syntax highlighting)
○ I will be using BBEdit
● Your favored set of web developer tools
○ I will be using Chrome
● Your favored EPUB QC tool for testing
○ I will be using iBooks and the inspector, and KPR3

14. Tools for tomorrow
● Inkscape (Free SVG creation tool)
● Adobe Illustrator

15. Geometry: Down is up
Everything is measured from the top left corner
Y
X0
● 1,1

16. Geometry: Down is up
Everything is measured from the top left corner
Y
X0
● 1,1
● 2,2

17. Geometry: Lines
<line x1="1" y1="1" x2="2" y2="2"/>
Y
X0
●
●

18. Geometry: Circles
<line x1="1" y1="1" x2="2" y2="2"/>
<circle cx="2" cy="2" r="1"/>
Y
X0
●
●

19. Geometry: “Mountain”
<line x1="1" y1="4" x2="2" y2="1"/>
<line x1="2" y1="1" x2="4" y2="4"/>
<circle cx="1" cy="1" r=".5"/>
Y
X

20. Geometry: Shapes
Types of shapes
● line
● rect (rectangle)
● circle
● elipse
● polyline (a multi-point line)
● polygon (a multi-sided shape)
● path (this is the most complex and
can be used to draw any shape)
Each shape has different
required attributes and can
be styled using CSS

21. Styling: CSS
● Most CSS properties can be used to style SVG
● There are some differences (like fill instead of color for text)
● Can be applied in multiple ways
○ Inline
○ Top of xhtml
○ Top of SVG
○ Separate CSS

22. Geometry: User coordinate system
● XHTML sets the size of the SVG
● viewBox on the SVG sets the stage
○ Declares the viewable area size
○ This one is easier to show
● Use unitless values or percent for all points inside the SVG

23. Let’s get started!

24. Let’s pretend this is SVG mountain
By Chris 73 / Wikimedia Commons, CC BY-SA 3.0,
https://commons.wikimedia.org/w/index.php?curid=1792595

25. OK, this is SVG Mountain
To the live code demo

26. Moving on from shapes

27. Moving on from absolute positioning
● Relative positioning, dx and dy
● Transformation basics:
○ rotate
○ skew
○ scale
● The transform attribute can concatenate them together
● The matrix element can be used for more complex transformations
● Bezier curves

28. Text in SVG
● Anything you can do in CSS you can do in SVG
○ Embedding fonts
○ Rotate, scale, skew
● There is no semantic meaning, just <text>
○ Can use ARIA to add semantic context but it’s weirdly implemented
● Night mode

29. A note on compatibility
● SVG in fixed layout is generally well supported
○ Except placing text on a drawn path
● SVG in reflow has real benefits, but large costs
○ Embedded fonts are mostly dependable
○ Processing time
○ Kindle Enhanced Typesetting is disabled
● Check your SVG files on all the platforms you want to support
○ Take what you would expect for CSS discrepancies and triple it
● Use SVG 1.1

31. Some resources:
MDN introduction: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
SVG 1.1: https://www.w3.org/TR/SVG11/
SVG 2.0: https://www.w3.org/TR/SVG2/
Tiny and Basic SVG: https://www.w3.org/TR/2003/REC-SVGMobile-20030114/
Inkscape: https://inkscape.org/