SVG and Google Books

momoha · 01-24-2019, 02:50 AM

I noticed that in Google Books, the height and width parameters inside the svg image are ignored and the image is displayed very tiny, which forces us to also specify the height and width inside our ePub, in the <img> containing the svg image.

This works fine, but how time consuming it is to have to enter these values everywhere! Is there any workaround? I’m searching like crazy and nothing works.

RbnJrg · 01-24-2019, 06:14 AM

Quote:

Originally Posted by momoha

I noticed that in Google Books, the height and width parameters inside the svg image are ignored and the image is displayed very tiny, which forces us to also specify the height and width inside our ePub, in the <img> containing the svg image.

This works fine, but how time consuming it is to have to enter these values everywhere! Is there any workaround? I’m searching like crazy and nothing works.

What code are you using to insert a svg image?

momoha · 01-25-2019, 03:46 AM

Quote:

Originally Posted by RbnJrg

What code are you using to insert a svg image?

I’ve been trying a variety of codes for almost five hours now, without succeeding in something working properly, but here is my original code that I use frequently and creates problems (big white spaces on top and bottom):

Code:

  <div><img style="width: 60pt;" src="../Images/canada.svg" alt=""/></div>

And if you don’t rescale your SVG and just use this simple code, then you’ll have a very tiny image:

Code:

  <div><img src="../Images/canada.svg" alt=""/></div>

Here the SVG code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="73.275px" height="17.408px" viewBox="0 0 73.275 17.408" enable-background="new 0 0 73.275 17.408" xml:space="preserve">
<path fill="#231F20" d="M14.604,5.854l-0.36-5.616c-0.045-0.135-0.266-0.136-0.27,0c-0.022,1.213-2.16,0.195-2.92,0.023
	C4.448-1.244,0,4.058,0,8.46c0,5.706,3.774,8.807,8.627,8.807c3.864,0,5.819-2.47,6.447-5.144c0.079-0.336-0.298-0.267-0.382,0
	c-1.168,3.729-4.066,4.671-5.503,4.649C6.065,16.728,3.161,14.21,3.055,8.46C2.919,1.137,11.192-3.657,14.333,5.764
	C14.4,5.967,14.559,6.012,14.604,5.854"/>
<path fill="#231F20" d="M18.826,16.75c1.415,0.181,2.674-1.101,2.674-2.358v-3.056C15.457,13.562,17.344,16.661,18.826,16.75
	 M17.299,6.754c1.707-0.719,6.335-0.495,6.335,1.617v6.491c0,1.775,1.753,2.383,2.246,1.191c0.157-0.158,0.43-0.046,0.293,0.225
	c-0.313,1.258-3.415,1.459-4.492-0.225c-5.952,4.336-9.751-4.201-2.63-4.337c2.226-0.337,2.473-1.616,2.473-2.517
	c0-2.224-1.168-2.426-1.865-2.426c-0.741,0-1.347,0.225-1.752,1.371C17.277,10.437,13.839,8.393,17.299,6.754"/>
<path fill="#231F20" d="M29.317,6.528l-2.898,0.381c-0.179,0.046-0.179,0.137,0.157,0.226c0.63,0.022,1.035,0.449,1.035,1.371v6.763
	c0,0.81-1.135,1.519-1.371,1.616c-0.54,0.226,0.271,0.181,0.271,0.181h4.737c0.157,0,0.651,0.045,0.023-0.246
	c-0.718-0.271-1.505-0.854-1.505-1.551V10.19c0-2.134,1.394-3.303,2.763-3.303c1.438,0,2.63,0.313,2.63,3.281v5.099
	c0,0.741-0.968,1.416-1.484,1.596c-0.337,0.09-0.472,0.201-0.179,0.201h5.054c0.271,0.023,0.384-0.066,0.136-0.133
	c-1.212-0.475-1.369-1.371-1.369-1.664v-5.93c0-3.393-3.259-2.943-4.403-2.943c-1.438,0.022-2.966,0.92-3.123,1.325
	C29.744,6.618,29.611,6.507,29.317,6.528"/>
<path fill="#231F20" d="M55.221,16.75c1.788,0,2.987-0.696,2.987-4.875c0-3.976-1.199-4.942-2.987-4.942
	c-1.789,0-3.24,2.32-3.24,4.987C51.98,14.588,53.432,16.75,55.221,16.75 M58.143,16.233c-0.494,0.854-1.707,1.057-3.213,1.057
	c-2.854,0-5.191-2.203-5.191-5.213c0-2.672,1.507-5.684,5.349-5.684c3.459,0,3.438,2.313,3.438,0.382V3.383
	c0-1.752-0.697-2.269-1.236-2.426c-0.786-0.269-1.798-0.315-0.179-0.315l3.01-0.066c-0.181,0.045,0.202,0.045,0.202,0.314v13.253
	c0,0.922,0.338,2.336,1.82,2.739c0.134,0.024,0.291,0.114,0.134,0.158l-3.28,0.36c-0.471,0.045-0.674-0.183-0.875-1.103"/>
<path fill="#231F20" d="M42.551,16.739c1.415,0.18,2.674-1.102,2.674-2.359v-3.056C39.181,13.549,41.067,16.649,42.551,16.739
	 M41.022,6.741c1.707-0.717,6.336-0.494,6.336,1.618v6.492c0,1.774,1.752,2.381,2.246,1.19c0.158-0.158,0.427-0.044,0.292,0.226
	c-0.315,1.26-3.414,1.461-4.493-0.226c-5.954,4.337-9.75-4.2-2.628-4.336c2.224-0.336,2.47-1.616,2.47-2.517
	c0-2.224-1.168-2.425-1.864-2.425c-0.739,0-1.348,0.224-1.752,1.369C41,10.425,37.563,8.382,41.022,6.741"/>
<path fill="#231F20" d="M65.892,16.761c1.416,0.182,2.675-1.1,2.675-2.357v-3.055C62.522,13.571,64.41,16.672,65.892,16.761
	 M64.365,6.765C66.071,6.046,70.7,6.271,70.7,8.382v6.491c0,1.776,1.753,2.383,2.246,1.192c0.156-0.157,0.428-0.045,0.292,0.225
	c-0.314,1.258-3.413,1.46-4.492-0.225c-5.953,4.336-9.751-4.201-2.629-4.336c2.225-0.338,2.472-1.617,2.472-2.518
	c0-2.225-1.169-2.427-1.864-2.427c-0.741,0-1.349,0.225-1.752,1.371C64.343,10.449,60.904,8.404,64.365,6.765"/>
<rect x="61.736" y="0.576" fill="#ED1A3B" width="2.471" height="5.031"/>
<rect x="69.689" y="0.576" fill="#ED1A3B" width="2.471" height="5.031"/>
<path fill="#ED1A3B" d="M66.605,1.621l0.354-0.719l0.352,0.693c0.043,0.073,0.078,0.067,0.148,0.032l0.301-0.149l-0.196,0.967
	c-0.041,0.189,0.067,0.245,0.185,0.117l0.431-0.459l0.112,0.26c0.04,0.079,0.098,0.068,0.173,0.053l0.442-0.094L68.76,2.883
	l-0.004,0.011c-0.019,0.074-0.052,0.135,0.027,0.17l0.16,0.078l-0.914,0.775c-0.095,0.096-0.063,0.126-0.026,0.233l0.085,0.26
	l-0.854-0.155c-0.105-0.026-0.178-0.026-0.183,0.059l0.036,0.979h-0.257l0.033-0.975c0-0.098-0.072-0.095-0.244-0.06L65.832,4.41
	l0.102-0.26c0.036-0.099,0.045-0.166-0.035-0.233l-0.935-0.763l0.173-0.105c0.05-0.038,0.054-0.078,0.025-0.163l-0.175-0.569
	l0.449,0.096c0.127,0.029,0.16,0,0.192-0.07l0.125-0.258l0.443,0.503c0.08,0.094,0.191,0.032,0.156-0.103l-0.214-1.047l0.331,0.189
	c0.052,0.032,0.107,0.041,0.139-0.02L66.605,1.621z"/>
</svg>

And here is my solution for the moment (I’m rescaling it but you can use the initial values of the SVG image, width: 73.275px; height:17.408px; and it works too of course):

Code:

  <div><img style="width: 60pt; height: 14.25pt;" src="../Images/canada.svg" alt=""/></div>

Another solution I came up with is to include the SVG code directly in the ePub, but then if you want to resize your SVG or use "em" to style it, then you face the same issue, which is that you have to make calculations to figure out the relative height or width. As we often use "em" values for our SVG to have them scale with the text, this creates a big problem for us. I need a code where I can rescale my SVG using only height or only width, with the ratio being preserved and without having these big white spaces being created.

RbnJrg · 01-25-2019, 05:13 PM

Ok, I think I know the cause of your issue. Right know I can't give a solution because I'm not in my home but in my next post I'll attach you an epub with the proper code to insert and style a svg image.

RbnJrg · 01-25-2019, 06:48 PM

Quote:

Originally Posted by RbnJrg

Ok, I think I know the cause of your issue. Right know I can't give a solution because I'm not in my home but in my next post I'll attach you an epub with the proper code to insert and style a svg image.

Ok, after what you wrote now I can understand the source of your issue. In effect, if you don't specify the width of your image, the e-reader will use the size embedded in the svg image. And in the present case, the size of your "Canada" (with the flag) text is very tiny; it just is 73px by 17px. Of course, if you open that image in Illustrator or Inkscape, you'll see it big but actually is a small one (just as big as the text Canada with a font-size of 1em). And when you set the size of an image, if you are going to do it by styling in-line (i.e <img style="width: 60pt" .../> is easier to do it of the following way:

<img width="60pt" .../>

or if you are going to use px, then

<img width="60" .../>

You don't need to set the height (unless you want a distorted image). But the best way to style an image maybe is of the following manner:

<p><img class="svg" .../></p>

I wrote a small epub with the following code:

Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

<p><img class="svg" alt="Temp" src="../Images/Temp.svg"/></p>

<p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>

and in the .css stylesheet I used:

Code:

p {
   font-size: 1em;
   margin: 0;
   text-align: justify;
}

.svg {
   font-size: 1em; /*This is important, you need to set a font-size*/
   width: 10em;
   height: auto;
   padding: 1em 0;
}

This is how it looks under ADE:

Click image for larger version

Name: Image1.png
Views: 164
Size: 101.4 KB
ID: 169295

Google Books is based on ADE so I think the things should go well with the previous code. Of course, instead of a width of 10em you can use the width of your wish, but always in "em".

Below you can check the respective epub.

Regards
Rubén

EDIT: By chance, are you working under epub3?

momoha · 01-28-2019, 09:45 AM

I tried your code and I get the same problem.

Google Books

Bluefire Reader

The thing is that, Google Books doesn’t use the height and width specified inside the svg image, and use only those in the ePub. So if nothing is written, the image will be very tiny. And if only one value is written, than the other one will create problem (big white space). So the solution is to specifiy both the width and height in both the svg image AND the ePub, but this is time consuming if you have to process a lot of svg images!

RbnJrg · 01-28-2019, 01:40 PM

Quote:

Originally Posted by momoha

I tried your code and I get the same problem.

Are you working under epub3? This is an important question because ADE (and any ereader based on ADE) is buggy under epub3 regarding svg images. If this is the case, then you need to include svg images of other way. You are telling me that images are very tiny and THAT is a symtom of svg under epub3.

momoha · 01-28-2019, 02:28 PM

Quote:

Originally Posted by RbnJrg

Are you working under epub3? This is an important question because ADE (and any ereader based on ADE) is buggy under epub3 regarding svg images. If this is the case, then you need to include svg images of other way. You are telling me that images are very tiny and THAT is a symtom of svg under epub3.

According to my tests, in both ePub 2 and ePub 3 the width and height have to be specified else the image is very small. In all softwares to specify it inside the svg file works fine, but in Google Books it has to be specified in the <IMG> in the ePub.

RbnJrg · 01-28-2019, 02:43 PM

Quote:

Originally Posted by momoha

According to my tests, in both ePub 2 and ePub 3 the width and height have to be specified else the image is very small. In all softwares to specify it inside the svg file works fine, but in Google Books it has to be specified in the <IMG> in the ePub.

Momoha, again I must do you the question; are you working IN THIS CASE under epub3? I know everything what you are telling me about svg because I have been working with that kind of files for years, using them as text, as fleurons, as TABLES, etc., etc. So, in order to be able to help you better, I must know under what protocol are you working.

momoha · 01-28-2019, 09:01 PM

Quote:

Originally Posted by RbnJrg

Momoha, again I must do you the question; are you working IN THIS CASE under epub3? I know everything what you are telling me about svg because I have been working with that kind of files for years, using them as text, as fleurons, as TABLES, etc., etc. So, in order to be able to help you better, I must know under what protocol are you working.

Well, there’s not only one case as I use SVG in all the books I produce (logos ans fleurons). I have been producing mostly ePub 2, but now I am analysing the possibility of switching to ePub 3 for all our books. Because of a lack of extensive testing of our files (

), I haven’t noticed that Google Books problem before, but considering how much that app is used, it’s kind of a big problem for me, both for ePub 2 and ePub 3!

Thanks for your help, it’s greatly appreciated! Can’t get my head around this problem even after so many hours of research... kind of getting crazy with this.

RbnJrg · 01-29-2019, 06:00 AM

Quote:

Originally Posted by momoha

Well, there’s not only one case as I use SVG in all the books I produce (logos ans fleurons). I have been producing mostly ePub 2, but now I am analysing the possibility of switching to ePub 3 for all our books. Because of a lack of extensive testing of our files (

), I haven’t noticed that Google Books problem before, but considering how much that app is used, it’s kind of a big problem for me, both for ePub 2 and ePub 3!

Thanks for your help, it’s greatly appreciated! Can’t get my head around this problem even after so many hours of research... kind of getting crazy with this.

Try in Google Books this new epub (epub2) I attach and tell me how it looks (I don't set the width or height in in the <img> tag, only in the css file). I'm using this time two different ways to include a svg (maybe one works better than the other).

momoha · 01-29-2019, 06:07 AM

This is the same code that I posted previously as the solution I found for the moment, so yes it does work, but as I was explaining, it causes me problem as I sometimes have many SVG files to process and rescale, so to have to make calculations every time increases around production costs. I’m looking for a solution where it can’t either be process through regex or by specifying only one value (height or width).

Edit: I just noticed your second code was different. This one shows up very tiny in Kobo.

momoha · 01-29-2019, 06:47 AM

I’m sorry my replies are getting a bit rude, I am reaching such a state of frustration with this

I spent the whole day on this again, and I found two codes that really aren’t that great but eases the work a little bit, and they seem to be working fine (tested with ePub3).

Link to SVG image with "calc" to ease the process:

Code:

<p class="texte"><img style="width: height: 1em; calc(1em*width/height);" alt="Logo Canada" src="../Images/canada.svg"/></p>

SVG code embedded, can be processed with regex so useful for books with lots of SVG. But properties="svg" has to be added in the content.opf. So SVG markup is pasted in the ePub, and this is added in the <svg>:

Code:

preserveAspectRatio="xMidYMin slice" style="width: 1em; padding-bottom: calc(1em*height/width); height: 1px; overflow: visible"

RbnJrg · 01-29-2019, 06:48 AM

Quote:

Originally Posted by momoha

This is the same code that I posted previously as the solution I found for the moment,...

In my last epub, I don't include any width or height inside the <img> tag. While you give the size of the image in the epub, inside the <img> tag, I give the size with css styles, so is not the same

.

Quote:

Edit: I just noticed your second code was different. This one shows up very tiny in Kobo.

In Kobo? What about Google Books?

Because my second code only use a measure, the width, and in percentage. If that works fine under Google Books, just make two epubs, one for Google (using the second method) and one for Kobo (and the others ereaders), with normal code and specifying only the width (in %) and height: auto (all that with css styles, being the images included with the first method).

momoha · 01-29-2019, 06:55 AM

Quote:

Originally Posted by RbnJrg

In my last epub, I don't include any width or height inside the <img> tag. While you give the size of the image in the epub, inside the <img> tag, I give the size with css styles, so is not the same

.

In Kobo? What about Google Books?

Because my second code only use a measure, the width, and in percentage. If that works fine under Google Books, just make two epubs, one for Google and the others ereaders and one for Kobo, with normal code and specifying only the width (in %) and height: auto (all that with css styles) being the images included with the first method.

Yeah in Google Books it was fine! But I don’t see how making multiple files could be viable for us as it would be complicated for our clients and also from what I know, the main platform where most of our clients send the ePubs takes only one single file, independently of whatever the readers use. So I think that we really need one single file that is compatible for everything. Hence the headache

01-24-2019, 02:50 AM	#1
momoha Annabelle Viau Posts: 43 Karma: 16664 Join Date: Jan 2015 Location: Rishikesh, India Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)	SVG and Google Books I noticed that in Google Books, the height and width parameters inside the svg image are ignored and the image is displayed very tiny, which forces us to also specify the height and width inside our ePub, in the <img> containing the svg image. This works fine, but how time consuming it is to have to enter these values everywhere! Is there any workaround? I’m searching like crazy and nothing works.

01-29-2019, 06:07 AM	#12
momoha Annabelle Viau Posts: 43 Karma: 16664 Join Date: Jan 2015 Location: Rishikesh, India Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)	This is the same code that I posted previously as the solution I found for the moment, so yes it does work, but as I was explaining, it causes me problem as I sometimes have many SVG files to process and rescale, so to have to make calculations every time increases around production costs. I’m looking for a solution where it can’t either be process through regex or by specifying only one value (height or width). Edit: I just noticed your second code was different. This one shows up very tiny in Kobo. Last edited by momoha; 01-29-2019 at 06:10 AM.

01-29-2019, 06:47 AM	#13
momoha Annabelle Viau Posts: 43 Karma: 16664 Join Date: Jan 2015 Location: Rishikesh, India Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)	I’m sorry my replies are getting a bit rude, I am reaching such a state of frustration with this I spent the whole day on this again, and I found two codes that really aren’t that great but eases the work a little bit, and they seem to be working fine (tested with ePub3). Link to SVG image with "calc" to ease the process: Code: <p class="texte"><img style="width: height: 1em; calc(1emwidth/height);" alt="Logo Canada" src="../Images/canada.svg"/></p> SVG code embedded, can be processed with regex so useful for books with lots of SVG. But properties="svg" has to be added in the content.opf. So SVG markup is pasted in the ePub, and this is added in the <svg>: Code: preserveAspectRatio="xMidYMin slice" style="width: 1em; padding-bottom: calc(1emheight/width); height: 1px; overflow: visible" Last edited by momoha; 01-29-2019 at 07:21 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
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
If Google Books or B&N discounts my books, will Amazon chop their price too?	wannabee	General Discussions	3	01-16-2012 01:15 PM
Google Books + Google Hosted Apps account	Mrs Late Bloomer	Library Management	2	08-26-2011 01:31 PM
Sony, Google and Barnes & Noble To Partner For Sales of Google Books [April Fools]	NatCh	News	73	04-07-2009 08:48 AM
Missing features: Gutenberg, Google Books, Google News, open RSS aggregator	Charbax	Amazon Kindle	10	11-22-2007 08:22 PM

01-25-2019, 05:13 PM	#4
RbnJrg Wizard Posts: 1,766 Karma: 8700631 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Ok, I think I know the cause of your issue. Right know I can't give a solution because I'm not in my home but in my next post I'll attach you an epub with the proper code to insert and style a svg image.

01-28-2019, 09:45 AM	#6
momoha Annabelle Viau Posts: 43 Karma: 16664 Join Date: Jan 2015 Location: Rishikesh, India Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)	I tried your code and I get the same problem. Google Books Bluefire Reader The thing is that, Google Books doesn’t use the height and width specified inside the svg image, and use only those in the ePub. So if nothing is written, the image will be very tiny. And if only one value is written, than the other one will create problem (big white space). So the solution is to specifiy both the width and height in both the svg image AND the ePub, but this is time consuming if you have to process a lot of svg images!

Advert

Advert