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.
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'm displaying SVGs in <img> tags. With viewBox these images could be scaled without losing clarity. However, when I copy these images (and paste them into PowerPoint, etc.), they won't be as clear as they are displayed.
How could I make copied images clear? And could this be done without using a canvas?
Example SVG markup:
<svg id="mol-638318-0540814976"
xmlns="http://www.w3.org/2000/svg" width="84" height="40" viewBox="0 0 84 40">
<style>
#mol-638318-0540814976 text {
dominant-baseline: central;
text-anchor: middle;
font-size: 16px;
font-family: serif;
fill: black;
}
#mol-638318-0540814976 line {
stroke: black;
}
</style>
<text x="26" y="20">C</text>
<text x="58" y="20">C</text>
<line x1="32" y1="20" x2="52" y2="20"></line>
</svg>
Thanks!
I have created this svg with an external font, that part of the SVG looks like this:
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
In Chrome this works nice, but when I try to load the svg into GIMP the font is missing. Is there a way for GIMP to render the google fonts?
Complete test svg:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">#import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika></style>
</defs>
<style>
text {
font-size: 30px;
font-family: Shadows Into Light;
}
</style>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
Update: For the SVG to work in Gimp or Inkscape:
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: 'Shadows Into Light';
font-style: normal;
font-weight: normal;
src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('http://themes.googleusercontent.com/static/fonts/shadowsintolight/v3/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff') format('woff');
}
text {
font-size: 30px;
font-family: Shadows Into Light;
}
]]>
</style>
</defs>
<text x="20" y="35"><tspan>Test</tspan></text>
</svg>
The problem goes further than external Google fonts:
1) Gimp (or whatever SVG parser it uses) is picky about the syntax (normally the style should be in CDATA)
2) Even with the CDATA fix (that at least stop nasty messages in the Gimp console), Gimp won't abide to the font-family style, even for fonts installed system-wide.
We are trying to display SVG backgrounds in internet explorer. Our images are always getting cut off when a zoom other than 100% is used. This can be reproduced using the following code:
with this svg
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
div {
width: 14px;
height: 14px;
background-size: 14px 14px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}
<div></div>
The result looks like this:
In all other browsers it renders fine. Has anyone else ever experienced this bug? Is there a workaround?
I have found one workaround which requires very little work:
Make the SVG image 2X size of the actual content (this would make the circle look like this:
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
Then use the :after pseudo element to create an inside element with 2x the desired size. So the html would be
<div class="circle"></div>
And the css would be
.circle {
width: 14px;
height: 14px;
position:relative;
}
.circle:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 28px;
height: 28px;
background-size: 28px 28px;
background-repeat: no-repeat;
background-image: url('circle.svg');
}
The extra space in the :after pseoudoelement gives IE spare canvas to draw on, but both the visible icon and the space occupied by the original container remain the same.
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>