I try to use specific fonts directly installed on my Windows in my SVG. It's for a local use.
Many fonts work well, with space in their name or not, some custom font works too but this font doesn't work, i try all possible syntax, nothing to do.
Here my SVG code
<?xml version="1.0" encoding="Windows-1252"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="0" y="1em" font-family="Alte Haas Grotesk" font-size="270.66875pt" fill="#000" >Test</text>
</svg>
You can download the ttf here:
https://1fichier.com/?1k6e2h4bja
Thanks for your help
Related
I am trying to render a chart but encounter a problem: The <text> elements appear in browsers (Chrome, Firefox) but not in traditional image viewers (Eyes of GNOME, GIMP, Inkscape).
Code
At first, I thought that it was because image viewers are incapable of rendering fonts, until I came across an asciinema's thumbnail, which is displayed perfectly by Eyes of GNOME:
Question: Why does this happen and how to fix this?
The reason is in nested SVGs:
<?xml version="1.0" encoding="utf-8" ?>
<svg ... >
<rect ... />
<svg ... >
<text ... >pdu --quantity=blksize tmp.sample</text>
</svg>
...
</svg>
Move your text elements to the root svg and you will be able to see them in the image viewers / editors (tested with Inkscape and GNOME image viewer)
Saving over the top of the existing logo.svg within a custom Drupal theme I am building. The logo does not show on the page (Firefox) and shows extremely large on Safari.
When "inspecting element" I can see that if I add width="" (and apply any number) - then the logo will appear in Firefox, and resize in Safari.
But I do not know how to apply a width to the site_logo within the Drupal theme files. Where would I do this, or alternatively how else would I fix this issue.
The site is in Drupal 8. I've tried moving the branding block into different sections (Nav, sidebar, Content, etc.) but it doesn't rectify the incorrect width issues.
Consider that SVG images not always have height and width dimensions in their markup, and that adding an SVG file with no dimensions set could affect the styling of your theme.
So open your SVG file in a text editor and ensure to set width, height and/or viewBox according your needs. Or try editing it with some vector image editing tool like Adobe Illustrator or Sketch or Inkscape.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="50"
viewBox="0 0 200 100">
<rect x="20" y="20" width="160" height="60"
fill="limegreen" stroke="black" stroke-width="2px" />
</svg>
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).
Can you change the color of a shape inside an SVG? Currently I'm using a PNG that I have to manually create in Photoshop for each different menu and I'm wondering if I can make the whole process dynamic.
Can't you just use style="background-color: #------;" (or maybe color:)?
EDIT: My mistake, the one you need is fill, so style="fill:#------;", and it should work with any shape.
You could use a hue-rotate filter, or you could fix the colors as suggested above. Probably more compatible to change the colors to what you need, but in any case, here's an example of the filter variant:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="h200" x="0" y="0" width="1" height="1">
<feColorMatrix type="hueRotate" values="200"/>
</filter>
<image xlink:href="http://imgur.com/D9aFo.png" width="207" height="46" filter="url(#h200)"/>
</svg>
You can see it live here if you use a browser that supports svg filters, e.g Opera or Firefox.
#Brendan_Long is correct, all you need is the style tag on a path object. See a demo here: http://kemputing.com/demo/shapeDemoColour.svg
Code like so:
<path
style="fill:#000080;"
d="M 125.0,478.0 172.0,305.0 337.0,266.0 508.0,438.0 482.0,586.0 287.0,659.0 z"
id="path2985"/>
Make a path matching your image then programmatically change the colour attached to it. You might want to use a tool like inkscape to lend a hand.