View Single Post
Old 01-25-2019, 03:46 AM   #3
momoha
Annabelle Viau
momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.momoha 's shirt has a full set of merit badges.
 
momoha's Avatar
 
Posts: 43
Karma: 16664
Join Date: Jan 2015
Location: Rishikesh, India
Device: iPad, Kobo, Windows 10 (ADE, Azardi), Android (Google Books, Bluefire)
Quote:
Originally Posted by RbnJrg View Post
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.

Last edited by momoha; 01-25-2019 at 04:13 AM.
momoha is offline   Reply With Quote