svg

Karellen · 07-09-2023, 07:55 PM

I was attempting to recreate a title page in an epub v3 that matches a pbook that I own.

I created the svg code in Calibre editor and it looks pretty good in the Calibre editor and Calibre viewer. See image 1

When I loaded it into my stock standard Libra 2, it looks like garbage.

I only use svg for occasional images so I don't have a huge amount of experience with it. Anybody see where I have gone wrong?

I have since opted to create and use a png instead, but still curious on where I have gone wrong.

DNSB · 07-09-2023, 10:53 PM

Did you send it to your Libra 2 as an epub or kepub?

Also, if you are going to post code here, please post it as text wrapped in a code box and preferably wrapped in spoiler tags.

Not to mention, posting the relevant contents of your stylesheet.css would have been helpful.

OTOH, the first line of your code ( <svg width="1200" height="1600" version="1.1" xmlns="http://www.w3.org/2000"> ) when typed into a epub3 file caused epubcheck to spit out:

Code:

Error while parsing file: element "svg" not allowed here; expected the element end-tag, text, element "a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "details", "dfn", "dialog", "div", "dl", "em", "embed", "epub:switch", "epub:trigger", "fieldset", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "i", "iframe", "img", "input", "ins", "kbd", "label", "link", "main", "map", "mark", "menu", "meta", "meter", "nav", "ns1:math", "ns2:svg", "object", "ol", "output", "p", "picture", "pre", "progress", "q", "ruby", "s", "samp", "script", "section", "select", "small", "span", "strong", "sub", "sup", "table", "template", "textarea", "time", "u", "ul", "var", "video" or "wbr" (with xmlns:ns1="http://www.w3.org/1998/Math/MathML"xmlns:ns2="http://www.w3.org/2000/svg") or an element from another namespace"

I think the correct item would be xmlns="http://www.w3.org/2000/svg"

Karellen · 07-09-2023, 11:29 PM

Oh, yes, I should have posted the code so it could be copied and pasted. Slipped my mind at the time.

Spoiler:

I send to the Libra 2 as epub.

I am not getting any such error here. I guess something is incomplete at your end, but try with the above code.

CSS...

Spoiler:

Code:

body {
  display: block;
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-indent: 0;
  widows: 1;
  orphans: 1;
}
blockquote {
  margin-left: 5%;
  margin-right: 5%;
}
del {
  /*background-color: black;*/
  text-decoration: line-through;
  color: black;
}
dt {
  font-weight: bold;
  padding-top: 1em;
}
dd {
  padding-top: 0.5em;
}
h1 {
  display: block;
  font-size: 1.5em;
  font-family: sans-serif;
  font-weight: bold;
  padding-top: 1.5em;
  padding-bottom: 0;
  text-indent: 0;
  text-align: center;
  text-decoration: underline;
}
.chapterh1 {
  /* Used for complex chapter headings along with h1 */
  display: block;
  font-size: 1.4em;
  font-weight: bold;
  font-style: normal;
  font-family: sans-serif;
  padding-top: 1em;
  padding-bottom: 1.5em;
  text-align: center;
  text-indent: 0;
  /*text-decoration: underline;*/
  /*text-transform: uppercase;*/
}
h2 {
  /*background-color: black;
  color: white;*/
  display: block;
  font-size: 2em;
  font-weight: bold;
  font-style: normal;
  font-family: serif;
  margin-top: 2.5em;
  margin-bottom: 1em;
  text-indent: 0;
  text-align: center;
  /*text-transform: uppercase;*/
  /*text-decoration: underline;*/
}
.chapterh2 {
  /* Used for complex chapter headings along with h2 */
  display: block;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  font-family: serif;
  padding-top: 0;
  padding-bottom: 1em;
  text-align: center;
  text-indent: 0;
  /*text-decoration: underline;*/
  /*text-transform: uppercase;*/
}
h3 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  font-style: normal;
  font-family: "Pistilli", serif;
  margin-top: 2.5em;
  margin-bottom: 2em;
  margin-right: 1em;
  text-indent: 0;
  text-align: center;
  /*  text-transform: uppercase;
  text-decoration: underline;*/
}
.chapterh3 {
  /* Used for complex chapter headings along with h3 */
  display: block;
  font-size: 1.2em;
  font-weight: normal;
  font-style: normal;
  font-family: "Pistilli", serif;
  margin-top: 2em;
  margin-bottom: 0;
  margin-right: 0;
  text-align: right;
  text-indent: 0;
  /*text-transform: uppercase;*/
  text-decoration: underline;
}
li {
  margin-left: 1em;
  padding-top: 0.5em;
}
mark {
  background-color: yellow;
}
p {
  display: block;
  margin-top: 0;
  margin-bottom: 0.1em;
  text-indent: 1em;
}
sub, sup {
  font-size: 0.6em;
}
table {
  width: 90%;
  font-family: sans-serif;
  margin: auto;
  /*border-collapse: collapse;*/
  /*border: 1px solid;*/
}
th {
  border-bottom: 1px solid;
  font-size: 0.9em;
  font-style: bold;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: left;
  text-indent: 0;
}
tr, td {
  /*border-bottom: none;*/
  /*border: 1px solid;*/
  font-size: 0.9em;
  font-style: normal;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: left;
  text-indent: 0;
  vertical-align: middle;
}
caption {
  font-size: 0.8em;
}
/* ##################### Class selectors ########################## */
.backimage {
  /*background-image: url(images/chapter_image.png);*/
  background-repeat: no-repeat;
  background-position: center;
}
.big {
  font-family: sans-serif;
  font-size: 1.5em;
  /*letter-spacing: 10px;*/
  text-indent: 0;
}
.big1 {
  font-family: serif;
  font-size: 3em;
  text-indent: 0;
}
.blue {
  color: blue;
  text-decoration: underline;
}
.bold {
  font-weight: bold;
}
.box {
  border-top: solid black;
  border-right: solid black;
  border-bottom: solid black;
  border-left: solid black;
  /*box-shadow: 2px 2px;*/
  background-color: inherit;
  color: inherit;
  margin-top: 1em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-bottom: 1em;
  text-align: left;
  text-indent: 0;
}
.centre {
  text-align: center;
  text-indent: 0;
}
.copyright {
  /*For the copyright page*/
  font-size: 0.7em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: right;
  text-indent: 0;
}
.dedication {
  font-style: normal;
  margin-bottom: 0%;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 2%;
  text-align: center;
  text-indent: 0%;
}
.firstletter {
  /* Enlarged first letter of chapter */
  float: left;
  line-height: 1.5em;
  font-size: 4.6em;
  /* padding-top: -0.37em;
  padding-bottom: -0.5em;*/
}
.firstletterscene {
  /* Enlarged first letter of scene change, mid-chapter */
  font-size: 1.5em;
  line-height: 1em;
}
.footnote {
  display: block;
  font-family: sans-serif;
  font-size: 0.7em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 4em;
  margin-right: 4em;
  text-indent: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  break-inside: avoid;
  text-align: justify;
}
.hanging {
  margin-left: 1em;
  margin-bottom: 0.5em;
  text-indent: -1em;
}
.imageportrait {
  height: 95%;
  width: auto;
  text-align: center;
  text-indent: 0;
}
.italic {
  font-style: italic;
}
.justify {
  text-indent: 0;
  text-align: justify;
}
.largetop {
  margin-bottom: 0;
  margin-top: 5em;
}
.lineshort {
  border-bottom: 3px solid black;
  width: 100%;
  margin-top: 1%;
  margin-bottom: 0.5em;
}
.noindent {
  text-indent: 0;
}
.noindent1 {
  text-indent: 0;
  margin-top: 0.5em;
}
.nopagebreak {
  page-break-inside: avoid;
}
.paraindentlarge {
  margin-left: 50%;
  text-indent: 0;
}
.paraindentmedium {
  margin-left: 15%;
  text-indent: 0;
}
.right {
  text-align: right;
}
.sans {
  font-family: sans-serif;
  font-size: 0.9em;
}
.scene {
  padding-bottom: 0.01em;
  padding-top: 2em;
  text-indent: 0;
}
.smallcaps {
  font-size: 0.8em;
  text-transform: uppercase;
  /*font-variant: small-caps;*/
}
.titlepage1 {
  font-family: serif;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  text-indent: 0;
}
.titlepage2 {
  font-family: serif;
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-indent: 0;
}
.titlepage3 {
  font-family: sans-serif;
  font-size: 1.3em;
  text-align: center;
  text-indent: 0;
}

Quote:

Originally Posted by DNSB

I think the correct item would be xmlns="http://www.w3.org/2000/svg"

That is what I have.

DNSB · 07-09-2023, 11:50 PM

Quote:

Originally Posted by Karellen

I am not getting any such error here. I guess something is incomplete at your end, but try with the above code.

My error. Swapped in a \ for a /

The kepub looks better but needs 4 pages for the display.

Karellen · 07-10-2023, 02:05 AM

So you couldn't get it to work correctly either?

I guess it might be Libra 2 software not playing nice.

Thanks for looking

pdurrant · 07-10-2023, 02:23 AM

I suspect it's the use of CSS styling inside the SVG. I think it's supposed to work, but I'm guessing the Libra 2 isn't doing it properly.

I'd try with a stand-alone SVG file, when the SVG file defines the fonts, sizes, etc.

Karellen · 07-10-2023, 03:06 AM

Quote:

Originally Posted by pdurrant

I'd try with a stand-alone SVG file, when the SVG file defines the fonts, sizes, etc.

Thanks, but I am not really sure what you mean by this.
Do you mean convert it into an svg image file
or do you mean that there is an svg file that works similar to a stylesheet.css and link that to my svg code?

pdurrant · 07-10-2023, 06:28 AM

Quote:

Originally Posted by Karellen

Thanks, but I am not really sure what you mean by this.
Do you mean convert it into an svg image file
or do you mean that there is an svg file that works similar to a stylesheet.css and link that to my svg code?

Yes, an svg image file. Or just don't use the CSS inside your in-line svg image.

RbnJrg · 07-10-2023, 08:56 AM

Three things you must do:

1) Style your svg INLINE (otherwise, you won't be able to do the next step).
2) After that, open it on Inkscape and convert all svg objects to PATHS.
3) Save the svg as PLAIN SVG.

After that, all your issues will have disappear under Kobo.

Karellen · 07-10-2023, 06:36 PM

Quote:

Originally Posted by pdurrant

Yes, an svg image file. Or just don't use the CSS inside your in-line svg image.

Ok, thanks. I'll try inline styling

Quote:

Originally Posted by RbnJrg

Three things you must do:

1) Style your svg INLINE (otherwise, you won't be able to do the next step).
2) After that, open it on Inkscape and convert all svg objects to PATHS.
3) Save the svg as PLAIN SVG.

After that, all your issues will have disappear under Kobo.

Thank you, I will try this.
I have downloaded and installed Inkscape, and I can see I am in for a pretty steep learning curve.
I thought I could just copy and paste my existing code above into Inkscape, but no such luck. Looks like it needs to be created from scratch.
Might take a bit of time to figure out, but not unachievable.

RbnJrg · 07-10-2023, 08:38 PM

Quote:

Originally Posted by Karellen

I thought I could just copy and paste my existing code above into Inkscape...

Just open the svg as a file (File -> Open...)

But first style inline your text, otherwise, the text will show very tiny on Inkscape.

By the way, you could have designed your svg directly from Inkscape; it's quite easy to do it (simpler than what you made writing the code by hand). In the Help menu you'll find some good tutorials to learn Inkscape (is easy).

DNSB · 07-10-2023, 09:25 PM

Other than the random house logo image not be present, I inlined the svg and imported it into Inkscape. I've attached the output png to this message. I also set the svg to 600x800 and then exported a 1200x1600 png.

Karellen · 07-11-2023, 08:03 PM

Quote:

Originally Posted by RbnJrg

Just open the svg as a file (File -> Open...)

But first style inline your text, otherwise, the text will show very tiny on Inkscape.

I have inline styled that page...

Spoiler:

I am sorry, but I am being a bit obtuse here. My question is "How?" How do I open it in Inkscape?
I have done the File>Open, but what am I opening? There is no option to import the epub. If I save that code to an xml, html or xhtml file, it is not a recognised format, so it doesn't appear in the list. If I save it with .svg extension it says "Failed to open requested file". Copy and paste doesn't work. So what am I opening?

Quote:

Originally Posted by RbnJrg

By the way, you could have designed your svg directly from Inkscape; it's quite easy to do it (simpler than what you made writing the code by hand). In the Help menu you'll find some good tutorials to learn Inkscape (is easy).

Sounds good. Once I can get the hang of it, I think it will come in useful. I'll have to sit down and go through their tutorials.
At the moment I use photoshop and just create whatever images I need, but it will be good to learn more about svg images.

Quote:

Originally Posted by DNSB

Other than the random house logo image not be present, I inlined the svg and imported it into Inkscape. I've attached the output png to this message. I also set the svg to 600x800 and then exported a 1200x1600 png.

Great. Thank you.

jhowell · 07-11-2023, 08:19 PM

Quote:

Originally Posted by Karellen

If I save it with .svg extension it says "Failed to open requested file".

Inkscape is an svg editor. If it doesn’t open your svg file then you must not have created it correctly.

Karellen · 07-11-2023, 08:21 PM

Quote:

Originally Posted by jhowell

Inkscape is an svg editor. If it doesn’t open your svg file then you must not have created it correctly.

Yes, silly me.
It doesn't like the header code from the xhtml file...

Spoiler:

Once I deleted those tags, I was able to open the file.

07-09-2023, 07:55 PM	#1
Karellen Wizard Posts: 1,107 Karma: 4911876 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	svg I was attempting to recreate a title page in an epub v3 that matches a pbook that I own. I created the svg code in Calibre editor and it looks pretty good in the Calibre editor and Calibre viewer. See image 1 When I loaded it into my stock standard Libra 2, it looks like garbage. I only use svg for occasional images so I don't have a huge amount of experience with it. Anybody see where I have gone wrong? I have since opted to create and use a png instead, but still curious on where I have gone wrong. Attached Thumbnails

07-10-2023, 08:56 AM	#9
RbnJrg Wizard Posts: 1,551 Karma: 6613969 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Three things you must do: 1) Style your svg INLINE (otherwise, you won't be able to do the next step). 2) After that, open it on Inkscape and convert all svg objects to PATHS. 3) Save the svg as PLAIN SVG. After that, all your issues will have disappear under Kobo. Last edited by RbnJrg; 07-10-2023 at 08:59 AM.

07-10-2023, 09:25 PM	#12
DNSB Bibliophagist Posts: 35,513 Karma: 145557716 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Other than the random house logo image not be present, I inlined the svg and imported it into Inkscape. I've attached the output png to this message. I also set the svg to 600x800 and then exported a 1200x1600 png. Attached Thumbnails Last edited by DNSB; 07-10-2023 at 09:35 PM. Reason: added extra image. Forgot to change the name so the second image survived

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
<svg><text>	Karellen	ePub	4	07-03-2022 01:34 PM
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared)	Just some guy	Editor	7	04-11-2017 09:54 PM
<svg> to <img>	codrutoctavian	ePub	8	03-01-2012 08:54 PM
Problems with SVG's	ferulebezel	Conversion	0	10-29-2011 09:15 PM
MathML TO SVG	saravanan.p	ePub	2	08-11-2011 11:38 AM

07-10-2023, 02:05 AM	#5
Karellen Wizard Posts: 1,107 Karma: 4911876 Join Date: Sep 2021 Location: Australia Device: Kobo Libra 2	So you couldn't get it to work correctly either? I guess it might be Libra 2 software not playing nice. Thanks for looking

07-10-2023, 02:23 AM	#6
pdurrant The Grand Mouse 高貴的老鼠 Posts: 71,515 Karma: 306214458 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Voyage	I suspect it's the use of CSS styling inside the SVG. I think it's supposed to work, but I'm guessing the Libra 2 isn't doing it properly. I'd try with a stand-alone SVG file, when the SVG file defines the fonts, sizes, etc.