Do SVGs have to be wrapped in DIVs?

what · 03-16-2021, 03:03 PM

Most sample code shows SVG in ePub wrapped in DIVs, e.g. for a full page image:

Code:

<div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 783 1200" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="783" height="1200" xlink:href="../Images/cover.jpg" />
    </svg>
</div>

A few questions:

Is such a wrapper necessary?
Is it necessary both for full page and for inline images?
Is it necessary also if the SVG doesn't contain a pixel image but only vector code?
Does the wrapper have to be styled in any way?

jhowell · 03-16-2021, 04:25 PM

EPUBCHECK does not have any problem with <svg> being used as a child of <body>. As far as I know there is no reason to wrap an inline SVG image within a <div>.

DNSB · 03-16-2021, 06:26 PM

AFAIR, epub2 required a wrapper around the SVG but that seems to have dropped in epub3.

what · 03-23-2021, 02:40 AM

As I found out, the specifications may not require a wrapper around an image, but if you want to center an image on devices like the Kindle, you may need to wrap the image in something like a paragraph (<P>) that allows you to apply "text-align:center" to the contained image.

03-16-2021, 03:03 PM	#1
what Enthusiast Posts: 28 Karma: 10 Join Date: Mar 2021 Device: none	Do SVGs have to be wrapped in DIVs? Most sample code shows SVG in ePub wrapped in DIVs, e.g. for a full page image: Code: <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 783 1200" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="783" height="1200" xlink:href="../Images/cover.jpg" /> </svg> </div> A few questions: Is such a wrapper necessary? Is it necessary both for full page and for inline images? Is it necessary also if the SVG doesn't contain a pixel image but only vector code? Does the wrapper have to be styled in any way?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
nesting divs & spans	AlanHK	ePub	7	11-20-2018 06:25 AM
Rogue Space appearing above floating divs	verydeepwater	ePub	0	06-07-2014 07:08 AM
SVGs are centered by KF8, how do you prevent it?	FunkeXMix	Kindle Formats	3	01-09-2013 07:32 PM
ePub (and KF8) from SVGs	heinrich66	ePub	5	05-03-2012 01:56 PM
Pasting creates DIVS but not Paragraphs?	bitterbug	Sigil	4	10-22-2010 12:42 AM

03-16-2021, 04:25 PM	#2
jhowell Grand Sorcerer Posts: 6,998 Karma: 89771343 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	EPUBCHECK does not have any problem with <svg> being used as a child of <body>. As far as I know there is no reason to wrap an inline SVG image within a <div>.

03-16-2021, 06:26 PM	#3
DNSB Bibliophagist Posts: 44,451 Karma: 167726581 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	AFAIR, epub2 required a wrapper around the SVG but that seems to have dropped in epub3.

03-23-2021, 02:40 AM	#4
what Enthusiast Posts: 28 Karma: 10 Join Date: Mar 2021 Device: none	As I found out, the specifications may not require a wrapper around an image, but if you want to center an image on devices like the Kindle, you may need to wrap the image in something like a paragraph (<P>) that allows you to apply "text-align:center" to the contained image.

Advert