Annabelle Viau
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
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.
|