View Full Version : SVG question


curiousgeorge
09-04-2012, 02: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:

<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, 08:23 PM
Here is valid code you can use to replace your 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, 01:41 PM
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, 09:09 PM
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, 03:01 AM
What errors is the W3C validation program reporting for that code?
Sorry slow with reply.
Anonymized code is:
<?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:

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, 05: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, 10: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.