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)
Related
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 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
I have a mobile application that involves moving of text in a marquee way. I used css3 animation and it looks laggy on the mobile. I choose to use svg as an animation. How can I implement a marquee animation in a svg. I am new in this.
Here is a simple animation with scrolling text. Hopefully this will get you started.
There are numerous tutorials on the web on how to do SVG animation. You could also read the SVG specification if you want more information.
Note that SMIL animation like this (SMIL is animation that uses the <animate> tag) does not work in IE. But you could use a library like FakeSmile if you need to support IE.
<svg width="500" height="100">
<text x="0" y="80" font-size="80">Here is some scrolling text
<animate attributeType="XML" attributeName="x"
values="520;-880;520" dur="15s" repeatCount="indefinite"/>
</text>
</svg>
I'm looking to produce a SVG file containing a single ascii character (say 'g' or 'W') from an arbitrary font centered within a 100 x 100 window. This is the closest I've got, but it's not quite right...
<?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 viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="50" font-size="100px"
text-anchor="middle" alignment-baseline="middle">g</text>
</svg>
SVG does not have automatic vertical layout capabilities on its own; you need something else to compute the height of the box, like JavaScript or…
Looks like you're embedding this inside of a web browser. If so, then you can use the automatic layout capabilities of HTML to do this for you, using <foreignObject> to embed an HTML snippet inside your SVG with display:table-cell; vertical-align:middle on the content.
There is no general way to centre text vertically in SVG.
The best you can to is work out where the baseline (<text> y attribute) should go for a particular font and group of characters (eg. all capitals).
I'm noting a difference between browsers in displaying text forced right-to-left and also using text-anchor="end".
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<text x="10" y="50" font-size="30" font-family="sans-serif" writing-mode="rl" direction="rtl" unicode-bidi="bidi-override" text-anchor="end" stroke="green" fill="green">
Force RTL
</text>
</svg>
In Chrome(v 27.0.1453.93 m) and I.E.(v 9.0.8112.16421), the text is shown as I would expect, with glyph stroking starting from the end point of the text and progressing to the left. With the example above, it is displayed in the upper left corner of the browser.
In Firefox (v 20.0.1) glyph stroking, with text-anchor="end", is starting from the start point of the text and the display is off the page. If I remove the text-anchor attribute, Firefox displays as Chrome and I.E. do with the text-anchor.
My questions are
Does anyone understand what's happening here? Or is this a FF bug?
If there's no work-around, how can I switch between user-agents in the SVG so for Firefox, I can avoid using the text-anchor?
Thanks very much
It's a bug in Firefox. Fortunately it will be fixed reasonably soon (not sure exactly when) as we're revamping/rewriting text support in SVG. If you want to see it working properly, download a Firefox nightly type about:config in the URL bar and set svg.text.css-frames.enabled to true. So be careful about user agent tests because this will get fixed before too long.