I try to render some text along a bezier curve path in SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="none"/>
<text fill="white">
<textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
</text>
</svg>
In Firefox this works fine, but in Chrome and Safari, the text looks ugly (look at "Musik"). Even when I use monospace fonts and set the text to uppercase it does not change.
Here the Screenshots:
http://imageshack.us/a/img18/3195/svgrendering.png
http://imageshack.us/a/img705/7334/svgrenderingwithpath.png
Does somebody have an idea on how to avoid this?
I created a jsfiddle which shows the problem:
http://jsfiddle.net/v6esx/
Thank you!
Related
I am using Apache FOP to generate PDFs, some pages require SVGs. For the most part, this works fine until I add the TextPath element. I am using this to get curved text. This SVG works in browsers but not in the PDF. Wikipedia shows Batik (the SVG renderer for Apache FOP) is compatible with TextPath: https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics). But no luck.
Any help on this would be appreciated. Note: I am intentionally trying to add text instead of a rasterized images as the text is being localized and injected in.
Here is a sample of an svg which can be found here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath href="#MyPath"> <!-- works if I remove this line -->
Quick brown fox jumps over the lazy dog.
</textPath> <!-- and this line -->
</text>
</svg>
According to the SVG 1.1 recommendation, xlink:href should be used to reference the path element. See https://www.w3.org/TR/SVG11/text.html#TextPathElement.
The following image displays in the Squiggle GUI (Batik 1.12), Firefox and Chrome.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath xlink:href="#MyPath">
Quick brown fox jumps over the lazy dog.
</textPath>
</text>
</svg>
When I use
rsvg-convert.exe -f pdf -o <output-name>.pdf <input-name>.svg
I get a result that differs from how the SVG is rendered in Inkscape and Firefox.
This is a simple test SVG:
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<text y="50" font-size="12" fill="black">Test</text>
<text x="50" y="50" font-size="12pt" fill="black">Test</text>
<text x="100" y="50" font-size="16px" fill="black">Test</text>
</svg>
In Inkscape and Firefox the middel and right text have the exact same size since these applications seem to assume that 1pt = 1.333333px which is the CSS recommendation. However, rsvg seems to assume 1pt = 1.25px which leads to different sizes of the texts. How can I get rsvg to output it correctly (as Inkscape and Firefox).
I tried the options -p and -d with 96 but that didn't give the correct result either.
Setting the dpi works here with rsvg-convert 2.40.20:
rsvg-convert -f pdf --dpi-x=96 --dpi-y=96 -o <output-name>.pdf <input-name>.svg
I also confirmed setting the output format to svg (text will be converted to paths) and comparing the height in Inkscape.
Many applications correctly handle SVG where the width and height are inches, such as
<svg width="1.5in" height="1in" xmlns="http://www.w3.org/2000/svg">
</svg>
I'm not familiar with rsvg-convert.exe, but it's the first thing I'd try. Adjust the width and height as needed.
I have created pill svg which has pattern image. It looks perfect in FF, IE, Edge, but in Chrome, Opera (webkit browsers) image is cut off. This problem is also on Mac in Safari and firefox.
Here is example in codepen: http://codepen.io/reinis/pen/wWXdbz
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 240 240">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="240" height="240" xlink:href="http://www.vrheadsets3d.com/wp-content/uploads/2016/07/dreams-of-dali-400x400.jpg"/>
</pattern>
</defs>
<path fill="url(#imgpattern)" d="M17.654,17.654C-5.93,41.238-5.878,79.528,17.77,103.176l59.448,59.448l59.606,59.606c23.648,23.648,61.938,23.7,85.522,0.116s23.532-61.874-0.116-85.522l-59.488-59.488L103.176,17.77 C79.528-5.878,41.238-5.93,17.654,17.654z" />
</svg>
Can anybody figure out what is happening?
Just change the viewbox to "0 0 300 300" and the image width and height to 300 as well, and in SVG you will face a lot of issues related with the viewBox, so for better understanding check this link
https://sarasoueidan.com/blog/svg-coordinate-systems/
I have a trouble opening an SVG file under my machine Linux:
Gave this svg file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1000px" height="707px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath" d="M 599,455 A 244,244 0 0,1 723,578" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
</svg>
If I open it with firefox I can see it, but If I open it with gimp for example, I can see nothing.
What part of that file is creating this issue?
You are saying you see no error, so I don't know if this is right:
If you built GIMP yourself, our are not using the system's GIMP for some
reason, there is a chance the devel-files for the SVG libs
were not present when GIMP was built. If taht is the case, it won't be able to
read the SVG file itself.
You didn't say anything about error, so your might be another issue
(for example, the "Verdana" font might not be available for
GIMP, and it being replaced by a font with no visible glyphs)
In any case, the workaround would be to open the SVG file
in Inkscape, and export it as a raster PNG file for you
to work with it in GIMP>
I am trying to render an SVG document containing some text. Everything is good in Chrome/FF/Safari:
But in Opera (v12.14, Mac OS X) font looks very ugly:
Is this normal or maybe I am doing something wrong? Is it possible to improve rendering quality? Here is the code:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="30" font-family="Arial" font-size="12" font-weight="bold">123 xyz XYZ</text>
<text x="10" y="50" font-family="Arial" font-size="12" font-weight="bold" fill="#666">123 xyz XYZ</text>
<text x="10" y="70" font-family="Arial" font-size="12" font-weight="normal" fill="#444">123 xyz XYZ</text>
<text x="10" y="88" font-family="Arial" font-size="10" font-weight="normal" fill="#444">123 xyz XYZ</text>
</svg>
I've tried:
embedding fonts using #font-face;
using fonts other than Arial;
setting text-rendering="optimizeLegibility".
None of this helps.
Edit
The solution is to use text-rendering="geometricPrecision" (see Erik Dahlström's answer):
The result is still worse than in other browsers, but it seems that for now it is the best that one can get in Opera for Mac OS.
I've also tried to translate the content by 0.5px in both directions. It slightly changes the output, but doesn't improve the quality in general.
Looks like subpixel text rendering is disabled for text inside SVG on Mac.
A workaround is to specify text-rendering="geometricPrecision". That makes Opera use glyph outlines for rendering instead of deferring the text rendering to the platform. However, note that this typically tends to be slightly less performant. Also note that using geometricPrecision doesn't enable subpixel text rendering in Opera, but the text will usually look a little different (usually a slight blur depending on the pixel grid alignment).