SVG question

curiousgeorge · 09-04-2012, 01:16 PM

I have a book with the front cover as an svg format. I have two issues with it. 1. it wont validate cause of this and two I have never used one before. I was wanting to know what are others take on it is?? It appears to allow the image to be stretched for the whole page. When I add an img tag to it I still have padding around the image. Suggestions??

CODE:

Code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 488 751" preserveAspectRatio="none">
                <image width="488px" height="751px" xlink:href="cover.jpeg"/>
            </svg>

So far from what I can research is the preserveAspectRatio is incorrect.

JSWolf · 09-04-2012, 07:23 PM

Here is valid code you can use to replace your code.

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
 @page {padding: 0pt; margin:0pt}
 body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 488 751" preserveAspectRatio="xMidYMid meet">
<image width="488" height="751" xlink:href="cover.jpeg"/>
</svg>
</div>
</body>
</html>

bobb40 · 10-12-2012, 12:41 PM

Quote:

Originally Posted by JSWolf

Here is valid code you can use to replace your code.

That's very like the code I've been using, and it works well. But the W3C validator finds fault with every part of it. Is there a way to make it validate?

JSWolf · 10-12-2012, 08:09 PM

Quote:

Originally Posted by bobb40

That's very like the code I've been using, and it works well. But the W3C validator finds fault with every part of it. Is there a way to make it validate?

What errors is the W3C validation program reporting for that code?

bobb40 · 10-16-2012, 02:01 AM

Quote:

Originally Posted by JSWolf

What errors is the W3C validation program reporting for that code?

Sorry slow with reply.
Anonymized code is:

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>xxxxxx xxxxxx</title>
    <link href="../Styles/wg_styles.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body id="xx_cover">
  
    <div>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="99%" height="99%" viewBox="0 0 590 913"
          preserveAspectRatio="xMidYMid meet">
        <image width="590" height="913"
          xlink:href="../Images/xx_cover.jpeg" />
      </svg>
    </div>    <!-- end cover -->

    <!-- balance of file is omitted -->

  </body>
</html>

Edited validator result is:

Code:

Validation Output: 11 Errors

Error Line 14, Column 20: there is no attribute "version"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

Error Line 14, Column 32: there is no attribute "xmlns"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

Error Line 16, Column 17: there is no attribute "width"
width="99%" height="99%" viewBox="0 0 590 913"

Error Line 16, Column 30: there is no attribute "height"
width="99%" height="99%" viewBox="0 0 590 913"

Error Line 16, Column 44: there is no attribute "viewBox"
width="99%" height="99%" viewBox="0 0 590 913

Error Line 17, Column 31: there is no attribute "preserveAspectRatio"
preserveAspectRatio="xMidYMid meet">

Error Line 17, Column 46: element "svg" undefined
preserveAspectRatio="xMidYMid meet">

Error Line 18, Column 24: there is no attribute "width"
<image width="590" height="913" xlink:href="../Images/wg_cover.jpeg" …

Error Line 18, Column 37: there is no attribute "height"
<image width="590" height="913" xlink:href="../Images/wg_cover.jpeg" …

Error Line 18, Column 54: there is no attribute "xlink:href"
<image width="590" height="913" xlink:href="../Images/wg_cover.jpeg" />

Error Line 18, Column 81: element "image" undefined
<image width="590" height="913" xlink:href="../Images/wg_cover.jpeg" />

Full validator output (val_html_output.tgz) is attached (I hope).

Validator is installed on local machine, and runs as apache2 daemon; it shows "This service runs the W3C Markup Validator, v1.2." at bottom of page.

Epubcheck shows "No Errors, No Warnings" on epub which includes this code.

Regards,
Bob

Jellby · 10-16-2012, 04:17 AM

Remove de DOCTYPE line. That DOCTYPE is for XHTML-only content, and you are including an <svg>, which belongs to a different type, that's why the W3C validator fails (it's not valid XHTML, as declared by its DOCTYPE)

Epubcheck accepts it as valid because (I believe) ePub explicitly allows documents including both XHTML and SVG content.

The DOCTYPE line is optional, but if it's present, it must be correct. The one you have is not, so it should be removed, and I think epubcheck should give it as an error too.

JSWolf · 10-21-2012, 09:42 PM

That then could be a Sigil bug if the ePub was edited with Sigil as Sigil changes the header to use DOCTYPE. If FlightCrew accepted this, then it's a bug in FlightCrew as well.

09-04-2012, 01:16 PM	#1
curiousgeorge Connoisseur Posts: 53 Karma: 10 Join Date: Aug 2012 Location: Nashville, Tn Device: ipad, Kindle Fire	SVG question I have a book with the front cover as an svg format. I have two issues with it. 1. it wont validate cause of this and two I have never used one before. I was wanting to know what are others take on it is?? It appears to allow the image to be stretched for the whole page. When I add an img tag to it I still have padding around the image. Suggestions?? CODE: Code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 488 751" preserveAspectRatio="none"> <image width="488px" height="751px" xlink:href="cover.jpeg"/> </svg> So far from what I can research is the preserveAspectRatio is incorrect.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<svg> to <img>	codrutoctavian	ePub	8	03-01-2012 08:54 PM
SVG Covers	paulfiera	Calibre	2	07-30-2011 08:37 PM
tables or svg?	bobcdy	ePub	18	12-06-2010 02:24 PM
Problems with SVG	ninni	ePub	11	06-18-2010 11:58 AM
gets SVG when should be JPG	JSWolf	Calibre	2	04-21-2009 03:35 PM

10-16-2012, 04:17 AM	#6
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Remove de DOCTYPE line. That DOCTYPE is for XHTML-only content, and you are including an <svg>, which belongs to a different type, that's why the W3C validator fails (it's not valid XHTML, as declared by its DOCTYPE) Epubcheck accepts it as valid because (I believe) ePub explicitly allows documents including both XHTML and SVG content. The DOCTYPE line is optional, but if it's present, it must be correct. The one you have is not, so it should be removed, and I think epubcheck should give it as an error too.

10-21-2012, 09:42 PM	#7
JSWolf Resident Curmudgeon Posts: 73,835 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	That then could be a Sigil bug if the ePub was edited with Sigil as Sigil changes the header to use DOCTYPE. If FlightCrew accepted this, then it's a bug in FlightCrew as well.

Advert

Advert