Thread: svg
View Single Post
Old 07-09-2023, 11:29 PM   #3
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 1,622
Karma: 9500498
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Oh, yes, I should have posted the code so it could be copied and pasted. Slipped my mind at the time.

Spoiler:
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

<head>
  <title>The Fourth K</title>
  <link type="text/css" rel="stylesheet" href="OEBPS/stylesheet.css"/>
</head>

<body>

  <svg width="1200" height="1600" version="1.1" viewBox="0 0 1200 1600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="0" width="20" height="1600" stroke="black" fill="black" stroke-width="5"/>
    <rect x="50" y="0" width="20" height="1600" stroke="black" fill="black" stroke-width="5"/>
    <rect x="90" y="0" width="20" height="1600" stroke="black" fill="black" stroke-width="5"/>

    <text x="150" y="200" class="titlepage2">MARIO</text>
    <text x="150" y="240" class="titlepage2">PUZO</text>
    <line x1="150" x2="300" y1="250" y2="250" stroke="black" stroke-width="5"/>
    <text x="150" y="290" class="titlepage2">THE</text>
    <text x="150" y="330" class="titlepage2">FOURTH</text>
    <text x="150" y="400" class="titlepage1">K</text>

    <image href="OEBPS/images/random_house.png" x="150" y="550" width="50" height="50"/>
    <text x="150" y="610" class="sans">RANDOM HOUSE</text>
    <text x="150" y="625" class="sans">NEW YORK</text>

  </svg>
    

</body>
</html>


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 View Post
I think the correct item would be xmlns="http://www.w3.org/2000/svg"
That is what I have.
Last edited by Karellen; 07-09-2023 at 11:33 PM.
Karellen is offline   Reply With Quote