I want to inline SVG code in HTML and have simple text (like "alt") as fallback for not supporting browsers. It's desired that the text could be formatted with CSS.
You can e.g use modernizr to toggle display of some text based on whether svg is supported or not:
<style>
/* if svg is supported - hide the fallback */
.svg .fallback {
display: none;
}
</style>
<svg> ... </svg>
<div class="fallback"></div>
See jsfiddle.
You can use foreignObject element to display fallback text.
If the browser supports SVG, foreignObject element contains fallback contents will be hidden by display attribute.
If the browser does not support SVG, elements defined by SVG have no effect, so fallback div element will be shown.
<html>
<head>
<style>
div.fallback{color:red;}
</style>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="50" fill="red"/>
<foreignObject display="none">
<div class="fallback">This browser does not support inline SVG.</div>
<foreignObject>
</svg>
</body>
</html>
Related
I'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
I have an SVG object link on my page:
<a href="#" target="_blank">
<object data="icons/email.svg" type="image/svg+xml" style="pointer-events: none;" class="icon">
gmail
</object>
</a>
I'm trying to change the fill color on hover using this code in my SVG file:
<style>
* {
pointer-events: fill;
}
#email:hover path {
fill:white;
}
</style>
The problem is that the hover effect only works when I remove the style="pointer-events: none;" from the HTML, but the link only works when that code is there.
Any help is appreciated. I checked similar topics and wasn't able to find an answer to this.
Links only work when the contents of an <object> tag is non-interactive hence they work if pointer-events="none" and not otherwise.
For your use case you probably need to make the link internal to the SVG file i.e. via an SVG <a> tag in the SVG file rather than using an HTML link in the HTML file.
I have sport schedules that I would like users to be able to print out on 2 or 4 pages. Tournaments with a large amount of teams would produce hard to read text because there isn't much space for it.
Not sure how to produce printable content with d3js, should I specify values for placement and size in pixels, centimetres, percentage? Percentage sounds good but would need to insert a page break element, maybe provide a separate svg for every page. Can't find a good article on how to do this and am wondering if I've missed something.
The code as is should produce lines with text labels, to fit it all on 2 pages the text in the labels would be very small so want to provide a 4 page version. So my question is: What would be the best way to do this?
I'm thinking of providing 4 or 2 svg elements with a page-break-after css style. The shape and dimensions would be roughly letter or a4 landscape and placement units are based on percentages.
[UPDATE]
Since pageSet and page elements seem to be ignored by Firefox (and inkscape) and wrongly interpreted by Chrome I've tried multiple svg's. This seems to print fine on my new but not latest Firefox and Chrome. Code I use is:
<html><head>
<title>Test tournament bracket</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
#media print {
.noPrint {display:none;}
}
</style>
</head>
<body>
<div class="noPrint">
<h1>Forms and non printable content</h1>
</div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
Hello
</text>
</svg>
<div style="page-break-after: always;"></div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
World
</text>
</svg>
</body></html>
Will give that a shot and see how it turns out.
I just learned that Modernizr uses two different classes for SVG support: no-svg and no-inlinesvg. I can't seem to understand the difference between the two.
According to caniuse.com, Safari 5 and below does not support inline SVG, but does support SVG. I tested this on some D3.js visualizations (them rendering SVG) and Safari 5 displays that correctly.
My first guess was that D3 produces inline SVG, but that does not seem to be the case. So I would love to hear an explanation of the difference between the two.
Inline SVG means using <svg> (and child) tags directly in your html document:
<!DOCTYPE html>
<html>
<body>
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text>
</svg>
</body>
</html>
SVG Support refers to the ability to understand and display SVG files using the <embed> or <object> tags.
Hey everyone, I was just wondering whether anybody had any experience with displaying svg in ie9 using the embed tag. Below is an example of my code:
<!DOCTYPE html>
<html><head><title>Example</title></head>
<body>
<embed id="E" height="50%" width="100%" src="example.svg">
</body>
</html>
Right now this displays just fine in Firefox, ie 8 with the Adobe plugin, however in ie 9 it just pops up a blank box with an image icon in the top left of the box. Does anybody have any ideas how I could fix this problem?
Althought your snippet includes a HTML5 DocType definition there are other factors which affect exactly how IE9 processes your HTML e.g. HTTP Response Headers (see How Internet Explorer Chooses Between Document Modes)
I think if you force IE9 into Standards mode your SVG will be rendered by IE9; to quickly test this just use the Developer Tools to control Browser and Document modes.
So, if your embdeded SVG now shows you're just left with figuring out what's triggering IE9 to select the wrong Document Mode.
I'm not sure if your question means that you're trying to figure out any way to display SVG in IE9, or specifically only with the <embed> tag. If you just want a way to display SVG in IE9, I recommend embedding SVG directly in XHTML5:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>untitled</title>
<style type="text/css" media="screen">
body { background:#eee; margin:1em }
svg { background:#fff; display:block; border:1px solid #ccc; width:100%; margin:1em -1px }
</style>
</head><body>
<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
<!-- SVG content here -->
</svg>
<script type="text/javascript"><![CDATA[
var svg = document.getElementsByTagName('svg')[0];
var svgNS = svg.getAttribute('xmlns');
// Access/manipulate your SVG here
]]></script>
</body></html>
If you want to test this technique, here are some examples (on my site) using SVG that work in IE9:
http://phrogz.net/svg/rainbowgrid.xhtml
http://phrogz.net/svg/3-point-circle2.xhtml
http://phrogz.net/svg/stirling_numbers.xhtml
http://phrogz.net/svg/soldiers.xhtml
http://phrogz.net/svg/drag_under_transformation.xhtml
http://phrogz.net/svg/complex_butterfly.xhtml
If this is not what you want, please clarify what your needs are.