Comments (10)
Font face issues have been reported in the past, and the code you pointed out was intended to fix the problem, but after some investigation, there's more to it than simply including @font-face
directives in the embedded CSS.
It turns out custom font faces needs to be inlined similar to the way images are being inlined before being loaded into a canvas. I've added a failing test for custom fonts to the tests page to make sure the problem is fixed.
Until saveSvgAsPng automatically inlines custom fonts for you, you can work around the problem by manually inlining them. For instance, the tests page uses the custom font Stalemate:
@font-face {
font-family: 'Stalemate';
font-style: normal;
font-weight: 400;
src: url(stalemate.ttf) format('truetype');
}
To inline the font yourself, change the value of the src
property to
src: url("data:font/ttf;charset=utf-8;base64,<data>");
where <data>
is the base64-encoded contents of your fonts file.
Hopefully I'll figure out a fix for for this sometime this week.
from savesvgaspng.
Eric, thanks for this workaround, I feel very fortunate to have come across your script and blog entry. I had been inlining the @font-face declarations but had not been directly encoding in base64, which I believe was the issue. Everything is working perfectly now.
from savesvgaspng.
FYI-
This format worked for me for embedding fonts-
src: url(data:application/x-font-woff;charset=utf-8;base64,) format('woff');
from savesvgaspng.
Hey @exupero do you have any guidance on how best to implement the font embedding? I've started trying some things for a project I'm working on but not sure my approach is very good.
I've been able to convert the fonts to base64 strings by doing XHR GET requests for them, then encoding the xhr.responseText
. My plan is to then write some hairy regex to replace the src: url(...)
entries with the encoded string.
Here's an initial attempt that doesn't appear to be working: https://github.com/nsonnad/saveSvgAsPng/blob/inline-fonts/saveSvgAsPng.js
Thanks!
from savesvgaspng.
So far I haven't had any better ideas on how to tackle inlining fonts than doing a regex replace, so if you can make it work, go for it.
I haven't looked very closely at your code yet, but when I took a stab at the problem a few months ago, I ran into trouble wrangling the requests to get font data with the requests to inline image data.
from savesvgaspng.
Thanks. The latest version of my code almost works. It succeeds in getting the fonts, processing them as base 64, and replacing the url()
CSS. The in-browser test you added passes.
The outstanding issue appears to be that on PNG download, the fonts don't work the first time, but work thereafter. I've moved to just inlining the fonts with a preprocessor, but think I'm pretty close. Will try to get back to it in the near future but would be great if you could have a look as well.
from savesvgaspng.
Excellent! Go ahead and make a pull request. I'll see if I can sort out the download problem.
Thanks for your work!
from savesvgaspng.
PR is at #29 ^
from savesvgaspng.
I am encountering the problem described by nsonnad in his 5/11/2015 comment - fonts do not render on the first save out, but do on every consecutive save. After a lot of testing I have no idea what is causing this but it does seem to be related to size of the SVG element - data uris and existing embedded fonts seem to cause problems.
My SVG is pretty complex and has an embedded font in defs and a medium sized image embedded as a URI. I thought maybe it was that my SVG element had some stuff already defined in defs (bc savesvg creates a 2nd defs element in the clone) but in simple examples this only causes the problem intermittently. Here's a minimal working example of the problem: http://www.austinclemens.com/test/test.html
At least in Chrome, the text won't render the first time the button is pressed after refreshing or loading the page. I think this is clearly related to overall size of the SVG - I have a huge data URI in this example for the chrome logo - but it's confusing to me that it then works on the 2nd try. Nothing changes about the clone object or the defs objects created by savesvg.
from savesvgaspng.
@austinclemens Thanks for the bug report. I suspect this is related to font loading. Since it's tangential to the main problem, please open a new issue if it's still a problem.
from savesvgaspng.
Related Issues (20)
- when <svg> has <img>,con't show the imge in the png HOT 3
- Size of downloaded image varying according to the zoom level of browser HOT 1
- Only half of the SVG is rendered
- saveSvgAsPng without css styleSheets, modifyCss dosen`t work, who can tell me how to use modifyCss HOT 3
- saveSvgAsPng makes svg's image fill disappear (d3.js) HOT 9
- use to generate PNG on server? (solved: using sharp.js instead) HOT 2
- CSS rule breaks export? HOT 3
- i get this error ReferenceError: excludeUnusedCss is not defined HOT 1
- How to add a Google Font? HOT 3
- Uncaught (in promise) TypeError: Cannot read property 'width' of undefined at saveSvgAsPng.js:265 HOT 1
- ReferenceError: navigator is not defined (using Node.js) HOT 1
- How to use fonts in options parameter. HOT 3
- saveSvgAsPng is not capturing all the items inside svg tag
- HOW can i do, if the dataURl size > 2M
- some svgs not working on mobile safari
- Syntax error HOT 1
- svgAsPngUri working on browser but not android HOT 1
- Add/Update TypeScript type definitions
- HTMLElement or SVGElement in Chrome HOT 1
- problem with Canvg library
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from savesvgaspng.