SVG in stylesheet?

AlexBell · 12-17-2013, 08:21 PM

Part of the background to this post is that I'm starting to explore how to use SVG images. Another part is that I dabbled with website design in the olden days, and always made sure that the HTML files validated to W3C standards.

I've experimented with a Coverpage.html file adapted from a file which I understand is used by Sigil. But when I checked it with the W3C markup validation service it indicated 11 errors: there is no attribute xmlns, height, preserveAspectRatio, version, viewbox, width, xlmns:xlink, svg, width, xlink:href, and image for this element in this HTML version.

I tried using the xhtml 1.0 transitional doctype, but it made no difference.

It is easy to put height, width, and image attributes in the stylesheet, but I couldn't manage the others. Is there any way to put them in the stylesheet? or to make the file validate in some other way?

eschwartz · 12-17-2013, 08:44 PM

Try using the Sigil "Add Cover" option -- it will auto-generate a new cover page based on whatever standards were coded into Sigil and using whatever image you select. It is embedded as an SVG.

AlexBell · 12-18-2013, 12:28 AM

Quote:

Originally Posted by eschwartz

Try using the Sigil "Add Cover" option -- it will auto-generate a new cover page based on whatever standards were coded into Sigil and using whatever image you select. It is embedded as an SVG.

Thanks, but that's how I got the file I made; that's where it's from. My concern is not how to produce a Coverpage.html; I've done that and got the file to display. My concern is how to make the file validate to W3C standards.

I acknowledge that the ebook that I took the file from which my file was made does validate with EPUB-Checker.exe. But I want each and every file in my ebooks to validate.

odedta · 12-24-2013, 03:00 AM

Here is a template I always use for cover.html and it validates!

PHP Code:


			
<?xml version='1.0' encoding='utf-8'?>

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

  <title>Cover</title>

  <style type="text/css">

  @page {

    padding: 0;

    margin: 0;

    }

  body {

    text-align: center;

    padding: 0;

    margin: 0;

  }

  </style>

</head>



<body>



  <div>



    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 563 751" width="100%">

      <image height="751" width="563" xlink:href="../Images/cover.jpg"/>

    </svg>



  </div>



</body>



</html>

AlexBell · 12-25-2013, 07:20 PM

Quote:

Originally Posted by odedta

Here is a template I always use for cover.html and it validates!

Thanks for your interest and your file. I wonder however whether we are talking past each other. I fully accept that files such as yours can be contained in an ebook which will validate with EPUB-Checker.exe. My interest is to get an HTML file which works as an SVG cover, and which validates to World Wide Web Consortium markup validation service.

I converted your file into an HTML file, and tested it with the W3C markup validation service at http://validator.w3.org/

The validation service gave the warning that there is no doctype, and tested it as an XHTML transitional file. It gave the same 12 errors that I described in a previous post.

I realise that my desire to find a way of doing an SVG cover with an individual HTML file which validates to W3C standards may be quixotic, but that's what I want to do.

Hitch · 12-25-2013, 11:16 PM

Quote:

Originally Posted by AlexBell

<snippage>

I converted your file into an HTML file, and tested it with the W3C markup validation service at http://validator.w3.org/

The validation service gave the warning that there is no doctype, and tested it as an XHTML transitional file. It gave the same 12 errors that I described in a previous post.

I realise that my desire to find a way of doing an SVG cover with an individual HTML file which validates to W3C standards may be quixotic, but that's what I want to do.

Sorry, but, I gotta ask:

Why? Why the validation need? Can you clarify it for me?

Hitch

Doitsu · 12-26-2013, 04:29 AM

Quote:

Originally Posted by AlexBell

I realise that my desire to find a way of doing an SVG cover with an individual HTML file which validates to W3C standards may be quixotic, but that's what I want to do.

I somehow fail to see what the problem is. The default SVG wrapper that both Sigil and Calibre create for cover pages passes ePubCheck, and you can of course also use the SVG wrapper to wrap an .svg image with text in it.

For example, I quickly slapped together a simple ePub with a text based SVG cover image that uses an embedded blackletter font. This ePub passes ePubCheck and displays as expected with ADE and you can easily change the cover text by editing the .svg file in Sigil.

Disclaimer: This won't work on any Kindle.

AlexBell · 12-27-2013, 12:58 AM

Quote:

Originally Posted by Hitch

Sorry, but, I gotta ask:

Why? Why the validation need? Can you clarify it for me?

Hitch

Thanks to you both. In the olden days I dabbled in website design, and soon learned that if I didn't validate all the HTML files (and stylesheets) they would come back to bite me. So I'm still fixed on validating all HTML files.

I realise that ePubs are not websites, but I'm too old and set in my ways to change. For what it is worth I don't see much improvement in using SVG wrappers over what I do now.

AlexBell · 12-27-2013, 12:59 AM

Quote:

Originally Posted by Doitsu

I somehow fail to see what the problem is. The default SVG wrapper that both Sigil and Calibre create for cover pages passes ePubCheck, and you can of course also use the SVG wrapper to wrap an .svg image with text in it.

For example, I quickly slapped together a simple ePub with a text based SVG cover image that uses an embedded blackletter font. This ePub passes ePubCheck and displays as expected with ADE and you can easily change the cover text by editing the .svg file in Sigil.

Disclaimer: This won't work on any Kindle.

Thanks, Doitsu. I've downloaded your file and will open it up to have a look at it.

odedta · 12-27-2013, 04:21 AM

Alex, the validator fails my input because it doesn't have !DOCTYPE element, html files require a DOCTYPE to pass validation of W3Consortium.
If you run it passed ePubChecker it passes the check and that's all that matters as far it goes for eBook validation.

Jellby · 12-27-2013, 05:13 AM

Quote:

Originally Posted by odedta

Alex, the validator fails my input because it doesn't have !DOCTYPE element, html files require a DOCTYPE to pass validation of W3Consortium.
If you run it passed ePubChecker it passes the check and that's all that matters as far it goes for eBook validation.

That's because the ePub spec does not require XHTML documents to be W3C-valid:

1.4.1.2: XHTML Content Document Requirements
A conformant XHTML Content Document must meet these conditions:

it is a well-formed XML document (as defined by XML 1.0); and
it is encoded in UTF-8 or UTF-16; and
it is a valid XML document according to the NVDL schema interaction provided in Appendix A; and
it has a MIME media type of either application/xhtml+xml or text/x-oeb1-document (deprecated); and
all XHTML elements and attributes not contained in an Inline XML Island are drawn from the XHTML subset identified in this document.

Valid XML yes, but the only XHTML mention is the last point.

DaleDe · 12-27-2013, 11:26 AM

Quote:

Originally Posted by odedta

Alex, the validator fails my input because it doesn't have !DOCTYPE element, html files require a DOCTYPE to pass validation of W3Consortium.
If you run it passed ePubChecker it passes the check and that's all that matters as far it goes for eBook validation.

HTML needs DOCTYPE but XHTML does not. ePub is technically XHTML no matter what the extension is.

Dale

12-17-2013, 08:21 PM	#1
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	SVG in stylesheet? Part of the background to this post is that I'm starting to explore how to use SVG images. Another part is that I dabbled with website design in the olden days, and always made sure that the HTML files validated to W3C standards. I've experimented with a Coverpage.html file adapted from a file which I understand is used by Sigil. But when I checked it with the W3C markup validation service it indicated 11 errors: there is no attribute xmlns, height, preserveAspectRatio, version, viewbox, width, xlmns:xlink, svg, width, xlink:href, and image for this element in this HTML version. I tried using the xhtml 1.0 transitional doctype, but it made no difference. It is easy to put height, width, and image attributes in the stylesheet, but I couldn't manage the others. Is there any way to put them in the stylesheet? or to make the file validate in some other way?

12-24-2013, 03:00 AM	#4
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	Here is a template I always use for cover.html and it validates! PHP Code: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cover</title> <style type="text/css"> @page { padding: 0; margin: 0; } body { text-align: center; padding: 0; margin: 0; } </style> </head> <body> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 563 751" width="100%"> <image height="751" width="563" xlink:href="../Images/cover.jpg"/> </svg> </div> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
stylesheet help	arethusa	ePub	6	07-02-2013 12:03 PM
Link Stylesheet Does Not Appear	smallstate	Sigil	2	09-20-2012 07:43 AM
How NOT to use a stylesheet?	karyan	Sigil	12	03-07-2012 12:43 PM
Stylesheet examples?	Skitzman69	Sigil	15	09-24-2010 08:24 PM
Where is the stylesheet.css?	roger64	Sigil	4	03-23-2010 02:12 PM

12-17-2013, 08:44 PM	#2
eschwartz Ex-Helpdesk Junkie Posts: 19,422 Karma: 85397180 Join Date: Nov 2012 Location: The Beaten Path, USA, Roundworld, This Side of Infinity Device: Kindle Touch fw5.3.7 (Wifi only)	Try using the Sigil "Add Cover" option -- it will auto-generate a new cover page based on whatever standards were coded into Sigil and using whatever image you select. It is embedded as an SVG.

12-27-2013, 04:21 AM	#10
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	Alex, the validator fails my input because it doesn't have !DOCTYPE element, html files require a DOCTYPE to pass validation of W3Consortium. If you run it passed ePubChecker it passes the check and that's all that matters as far it goes for eBook validation.