I have an HTML that contains inline SVG data. I want to convert that HTML file into the PDF file. I have tried 2 packages TCPDF and DOMPDF to convert HTML into PDF. These packages are not displaying SVG content in the converted PDF files.Here is my HTML content
<div style="position: relative;"><img src="https://cdn.shopify.com/s/files/1/1659/7869/products/TEAM-TAKEDOWN-STREAMLINE-WHITE.jpg" style="width: 600px; height: auto;"><div style="position: absolute; top: 216px; left: 194px;width: 225px;height: 330px;overflow: hidden;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225" height="330" viewBox="0 0 225 330" xml:space="preserve">
<defs>
</defs>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://cdn.shopify.com/s/assets/no-image-100-c91dd4bdb56513f2cbf4fc15436ca35e9d4ecd014546c8d421b1aece861dfecf_small.gif" x="-50" y="-50" width="100" height="100"></image>
</g>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1597153275_Asset%201%20copy%202.png" x="-215.5" y="-244.5" width="431" height="489"></image>
</g>
<g transform="matrix(0.5 0 0 0.5 112.5 165)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1595491407_1592358037_design.png" x="-200" y="-200" width="400" height="400"></image>
</g>
</svg></div></div>
Here is my current output: http://prntscr.com/u5jcc3.
Here is the expected output: http://prntscr.com/u5jd4s.
Related
My code generates a transparent screenshot with an SVG input and overlays it in a video. There are some issues with the fonts. All fonts display correctly on my local Windows environment. But some fonts DO NOT display correctly on the linux server. What can the problem?
screenshot of display of the SVG file on a browser
screenshot of video snapshot from local
screenshot of display of the SVG file on a browser
Here are snippets of a font that works and one that doesn't.
<g transform="matrix(1 0 0 1 800.64 329.62)" style="" >
<text xml:space="preserve" font-family="Ecuyerr" font-size="50" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" paint-order="stroke" ><tspan x="-135.5" y="15.71" >Ecuyerr</tspan></text>
</g>
<g transform="matrix(1 0 0 1 332.6 250.68)" style="" >
<text xml:space="preserve" font-family="Carolyna Cute" font-size="50" font-style="normal" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" paint-order="stroke" ><tspan x="-126.97" y="15.71" >Carolyna Cute</tspan></text>
</g>
Puppeteer uses a link to get the font info.
<link href='https://domain/fonts/fonts.css' rel='stylesheet'>
#font-face {
font-family: 'Carolyna Cute';
src: url('carolynacute-webfont.eot');
src: url('carolynacute-webfont.eot?#iefix') format('embedded-opentype'),
url('carolynacute-webfont.woff2') format('woff2'),
url('carolynacute-webfont.woff') format('woff'),
url('carolynacute-webfont.ttf') format('truetype'),
url('carolynacute-webfont.svg#carolyna__cuteregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font
#font-face {
font-family: 'Ecuyerr';
src: url('ecuyerr-webfont.eot');
src: url('ecuyerr-webfont.eot?#iefix') format('embedded-opentype'),
url('ecuyerr-webfont.woff2') format('woff2'),
url('ecuyerr-webfont.woff') format('woff'),
url('ecuyerr-webfont.ttf') format('truetype'),
url('ecuyerr-webfont.svg#ecuyerdaxregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have added "--font-render-hinting=none". It doesn't work.
Then I upload true type fonts to the /usr/shared/fonts directory. It seems to fix all fonts except one, Carolyna Cute.
Then I get another set of the font and update the CSS file and upload the true type to the fonts folder. It is still not working.
1 font not working
I am using SVGtoPDF npm library to get svg element on pdf but for following svg object it is not working as <image> tag is creating problem.
ERROR Message:: SVGElemImage: failed to open image "http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg" in PDFKit
My SVG data:::
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 400 400" xml:space="preserve">
<desc>Created with Fabric.js 2.7.0</desc>
<defs>
</defs>
<g transform="matrix(0.31 0 0 0.31 200 200)" >
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg" x="-512" y="-640" width="1024" height="1280"></image>
</g>
<g transform="matrix(1 0 0 1 206.5 263.5)" >
<rect style="stroke: rgb(0,0,255); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(230,230,230); fill-opacity: 0.8; fill-rule: nonzero; opacity: 0.2;" x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</g>
<g clip-path="url(#CLIPPATH_4)" >
<g transform="matrix(0.9 0 0 0.9 205 244.88)" >
<clipPath id="CLIPPATH_4" >
<rect transform="matrix(1 0 0 1 206.5 263.5)" x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</clipPath>
<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="http://174.138.12.68:4000/transparent_images/1598349009675-1589379674035GoogleFiveStarCust.Rating.pdf-1.svg" x="-111" y="-92" width="222" height="184"></image>
</g>
</g>
</svg>
I think remote image import is still not implemented. What you can do is download the image and replace the path in the svg and export. This is working for me since my original svg referenced local image I didn't had this issue.
I'm trying to modify a svg to make the image it holds take the full width and height of the svg. How can I do that?
I'm trying to modify width and height to 100%, x, y to "0" and set this svg property preserveAspectRatio="xMidYMid meet".
This is the initial svg :
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1512" height="1063" viewBox="0 0 1512 1063" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve"><desc>Created with Fabric.js 1.6.7</desc><defs></defs><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
What I've been trying to do :
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve" preserveAspectRatio="xMidYMid meet"><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="100%" height="100%" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
I expect this result :
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
</svg>
But if i just change image url of expect svg, result is different of what i expect i don't understand why.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" width="100%" height="100%"></image>
</svg>
The final objective is to download the svg in png. The code to transform to png is finished however because of this svg problem, the final image is not good.
You need to adjust the viewBox attribute. The one you currently have is way too big. Your important content occupies a small portion in the middle of that area.
Your current viewBox is:
viewBox="0 0 1512 1063"
A better viewBox that matches the non-transparent part of your background image is:
viewBox="472 16 616 960"
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
However in this example it still does not fit exactly. That is because your SVG dimensions (219 x 302) have a different aspect ratio to the image/viewBox (616x960).
You can fix that in various ways:
You could stretch the viewBox area, to fit the wider SVG dimensions, by adding preserveAspectRatio="none" to the SVG.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="none">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
You could arrange for the viewBox area to be enlarged to fit the wider SVG dimensions (equivalent to HTML's background-size: cover), by adding preserveAspectRatio="xMidYMid slice" to the SVG.
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="xMidYMid slice">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
You could make the SVG narrower by reducing the width attribute. A more correct value would be:
302 * (616/960) ~= 194
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="194" height="302" viewBox="472 16 616 960">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
The problem you have is that the image has a wide transparent border. You either need to use a Photoshop like software to cut off that border or you can do it like this:
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg viewBox="-304 -506 608 1005" >
<g id="theg">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-733" y="-750" width="1461" height="1564"></image>
</g>
<g id="theText" text-anchor="middle" fill="#ffffff">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" >Votre entreprise</text>
<text font-family="ABeeZee" y="30" font-size="20" >Votre adresse</text>
<text font-family="ABeeZee" font-size="18" y="60" >Votre telephone</text>
</g>
</svg>
I want to have my SVG, that is 100% width and height, with round caps.
Now they are kinda stretched.
html,
body {
width: 100%;
height: 100%;
margin: 0;
background-color: cadetblue
}
.st0 {
fill: none;
stroke: green;
stroke-width: 20px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M15 15 L85 15 L85 85 L15 85 L15 50 L50 50 " class="st0"/>
</svg>
Thanks for helping me out!
Ok, found it myself:
Just added
vector-effect="non-scaling-stroke"
Into the SVG
Just another question about SVG export in Fabric.js, I have tried http://fabricjs.com/kitchensink/ and I added two images to the canvas, then I applied shadow filter to them.
When I export it to image, looks nice, but when I export it to SVG, all images are not displayed. I used windows 7, Firefox 25, the filter is missing in SVG, it supposed to be located inside <defs>.
So my question is what I should know when I am doing with SVG from Fabric.js, if it didn't support somewhere, how could I add my own export method to its object, as I will use clip (not displayed in SVG too), shadow, and all other filters. Thanks.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" xml:space="preserve"><desc>Created with Fabric.js 1.4.0</desc>
<defs></defs>
<g transform="translate(237.81 209.86) rotate(36) scale(0.16 0.16)"><image xlink:href="http://fabricjs.com/assets/pug.jpg" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_5);" transform="translate(-360 -540)" width="720" height="1080" preserveAspectRatio="none"></image></g>
<g transform="translate(479.6 187.6) rotate(3) scale(0.8 0.8)"><image xlink:href="http://fabricjs.com/assets/logo.png" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_4);" transform="translate(-137.5 -47.5)" width="275" height="95" preserveAspectRatio="none"></image></g>
</svg>