09-04-2012, 01:16 PM | #1 |
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> |
09-04-2012, 07:23 PM | #2 |
Resident Curmudgeon
Posts: 73,987
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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> |
10-12-2012, 12:41 PM | #3 |
Enthusiast
Posts: 28
Karma: 274
Join Date: Jul 2011
Device: Kindle3, Kindle4, KoboGlo
|
|
10-12-2012, 08:09 PM | #4 |
Resident Curmudgeon
Posts: 73,987
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
10-16-2012, 02:01 AM | #5 | |
Enthusiast
Posts: 28
Karma: 274
Join Date: Jul 2011
Device: Kindle3, Kindle4, KoboGlo
|
Quote:
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> 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" /> 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 |
|
10-16-2012, 04:17 AM | #6 |
frumious Bandersnatch
Posts: 7,516
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 |
Resident Curmudgeon
Posts: 73,987
Karma: 128903378
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.
|
|
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 |