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>
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 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.
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.
This animation of an svg works fine in chrome but not safari and firefox. I have this css:
#one{
fill:#97e8da;
stroke: $green;
}
#two{
fill: #46ceb4;
stroke: $green;
}
#one,#two{
stroke-width: 0;
-webkit-animation:load 3s linear;
animation:load 3s linear;
}
#-webkit-keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}#keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}
And my inline svg looks like this:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="130px" height="113px" viewBox="-10.062 -10.34 130 113" enable-background="new -10.062 -10.34 130 113" xml:space="preserve">
<path id="one" stroke-dasharray="1200 1000" d="M120,81.456L39.094 81.456 50.188 64.799 88.688 64.799 46.472 -10.184 66.943 -10.184 109.18 62.635 z"/>
<path id="two" stroke-dasharray="1200 1000" d="M0.011,101.998L-10 83.913 44.068 -8.737 84.229 62.414 63.607 62.414 43.62 27.393 z"/>
</svg>
In safari I can see the dash animation occurring but the path has no colour, it just clips the shape. In both cases the fill opacity does work
What's the $ doing before green? Fixing this makes it work in Firefox for me.
#one{
fill:#97e8da;
stroke: green;
}
#two{
fill: #46ceb4;
stroke: green;
}
I'm not exactly sure what your goal is, but I have it working the same on Firefox, Safari and Chrome.
http://codepen.io/Bushwazi/pen/jqgaZO
I pulled the stroke-dasharray out of inline and put it into the CSS, along with stroke-dashoffset
I used AutoPrefixer for the prefixes, because it's smarter than us. This could be where your's is failing, but honestly I'm guessing.
I log the getTotalLength value to get the actual number to use in the array and offset.
The animation loops in the pen, but just so you can watch it.
I have an svg file with custom font families working in the browser. When I convert the svg to any image type (I have tried png jpg pdf) the font reverts to Arial. I have the font on the server and it shows on the list of fonts when I use:
convert -list font
Here is the SVG code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="720" height="288" viewport-fill="white" xml:space="preserve">
<style>
#font-face {
font-family: 'ubuntubold';
src: url('fonts/ubuntu/ubuntu-b-webfont.eot');
src: url('fonts/ubuntu/ubuntu-b-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ubuntu/ubuntu-b-webfont.woff') format('woff'),
url('fonts/ubuntu/ubuntu-b-webfont.ttf') format('truetype'),
url('fonts/ubuntu/ubuntu-b-webfont.svg#ubuntubold') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</defs>
<g transform="translate(450 149) rotate(0)">
<text font-family="'ubuntubold'" font-size="40" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #0038ff; opacity: 1;" transform="translate(-240.54 39)">
<tspan x="0" y="-26" fill="#0038ff">
Bluemoon Entertainment</tspan>
</text>
</g>
</svg>
To convert to an image I am using:
convert -verbose -density 300 test.svg test_density.png
I know there are other image conversion programs out there but my client is very adamant that I use imagemagick.