SVG fonts in Firefox other than serif and sans-serif? - firefox

I am using fonts in an embedded SVG file rendered in Firefox (v26, "Nightly" and future versions). Other than the two fonts serif and sans-serif, what else is available?
My SVG is generated in Adobe Illustrator. Any font-family names I specify only render correctly in Safari and Chrome and I cannot use outlines as a workaround, as I will be annotating the SVG with dynamically-generated label text.
Other than using outlines, what is the process for annotating SVG documents with custom text elements, such that they will render correctly in Firefox?

On making your SVG render pretty fonts
It is entirely possible for Firefox to present SVG text in a custom font. For example, it can be done as follows:
<svg>
<style>
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
text { font-family:Varela Round, sans-serif; }
</style>
<text y="20">I will appear in a custom font</text>
</svg>
This fiddle demonstrates the usage to some extent. Note that in jsfiddle the CSS is included as an HTML style sheet, not directly in the CSS.
The following can be used as a data URL, i.e. you may copy an paste it directly into the address bar. It demonstrates using #import from the SVG directly.)
data:text/html, <svg><style>#import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)
(Of the current popular browsers, only Firefox supports data URLs in the address bar. Also if you change the data's MIME to image/svg+xml it won't work in Firefox.
In a comment on the previous answer to this question, Robert Longson also shared a link demonstrating an imported font using <link rel=stylesheet. Note that some of the fonts on that page are rejected by Firefox for technical reasons which I don't understand. However, almost all of them work.
Regarding the politics around SVG Fonts
SVG Fonts is a branch of the SVG spec which deals with defining your font in an SVG file. This is totally different to using a font in an SVG file, which I have outlined above.
Mozilla's position on the SVG Font spec, as I understand it, is that the only benefit to SVG fonts is that you can define your font by hand in a text editor. Others have expressed similar opinions. This is why Mozilla have concentrated on WOFF.
The current state of importing web fonts is such that, to achieve cross-browser/device compatibility, you have to provide multiple different font formats. This is unfortunate, but hardly the end of the world in my opinion.

Unfortunately for you, Mozilla has indefinitely postponed SVG font implementation to focus on WOFF. In fact this bug was even labeled on Bugzilla as "RESOVLVEDWONTFIX". Here is the link for MDN and the link on Bugzilla.
Admittedly I do not know enough about SVG Font to know if the CSS #font-face element will work and I also saw reference to Openfont.

Related

IE9 - 11 SVG backgrounds are blurry

This is only happening in Internet explorer. I am looking for a solution. I read that ie rasterizes background images or something just like older firefox versions but what are the solutions? Im so desperate. I dont want to serve an inline img image only because of IE.
This is seriously limiting. All other browsers render the SVG 99% the same and accurately.
Use inline image SVGs. If you are concerned that the resource is download by browsers other than IE then use javascript media queries
I've found that deleting the width and height attributes of the svg root (in the svg file itself) helps a little, but not always. You will want to make sure viewBox is defined to retain the aspect ratio.

D3.js Unable to get map zooming to work in Webkit browsers

I have a map where clicking an area to zoom in works in FireFox, but not in Chrome, Opera and Safari.
The map can be viewed at http://tcan.ca/content/tcan-neighbourhood-members
Anyone have suggestions about what can be causing this?
You can't use transformations directly on the <svg> element in webkit -- and even on other browsers, it won't always do what you expect.
A top-level <svg> element is positioned on the webpage as an HTML object (similar to a <div>). Transformations that apply to it are interpretted as HTML/CSS transformations. The CSS transformation syntax is still not finalized and webkit browsers only support a prefixed -webkit-transform version.
Rather than deal with multiple transformation syntaxes, add a <g> element inside your <svg>, append all your graphical content within the <g>, and then declare your SVG transformations on the <g>. It will work in all the browsers that support SVG.

Large black circles overlay scatterChart

I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}

Layered Backgrounds in IE8

background-image: url('/images/tenticles.png'), url('/images/header.png');
I have the above code, which works in both Firefox and Chrome. However it does not work in IE8. I was wondering if there was a way around this not working. Something similar to HTML5shiv.
There are multiple workarounds for IE's lack of multiple background support. One such technique involves simply creating a div that spans the entire page, and setting its background along with the background of the body element. This technique can be repeated as necessary. For example:
body { background-url('/images/tenticles.png'); }
#background1 { background-url('/images/header.png'); }
<body>
<div id="background1">
</div>
</body>
However, it looks like you want something along the lines of CSS3 PIE (Progressive Internet Explorer), which "makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features". From PIE's website:
PIE currently has full or partial support for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
Other features are under active development.
Note that this question is very similar and has a lot of other useful information and techniques.

Scrolling & zooming SVG Viewer on Windows?

We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!
If you really do mean SVG, Inkscape should work.
You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.
If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.

Resources