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.
Related
I've written some SVG:
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150" cy="75" rx="100" ry="75" fill="rgb(200,240,120)" stroke="rgb(200,240,120)" stroke-width="3px" />
</svg>
It renders like this
I want to convert the fill color render effect to look like this
I have read the w3c document about SVG. I tried filter but It doesn't work like those images.
What you want to do is called a "hatch pattern". Do a web search for how to do that in SVG. Basically you need to define your hatch using the <pattern> element.
The following SO question may help you: Simple fill pattern in svg : diagonal hatching
Note that the unfinished SVG2 standard defines a new <hatch> element that will make creating hatch patterns a lot easier. However you cannot use this yet because no browser has implemented <hatch> yet.
I'm creating an SVG. The SVG-tag looks like this:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">
If I replace that with a simple <svg width="800" height="800"> tag, the document is blank. In Chrome, it works if I take away the upper tag but not the XMLNS. In IE11, as soon as I take away anything (the DOCTYPE, the XMLNS, the PUBLIC...) the document is blank. Why do I need such complicated elements?
SVG files are XML files. As such, when they are standalone files, they need some sort of pre-amble so that whatever parsing it knows what to do. So standalone SVG files need to at least have the xmlns attribute. The browser requires that. However, the DocType is not necessary unless you want to do proper XML validation.
When an SVG is inlined in the body of an HTML page, you don't need either. The HTML parser knows about SVG content and knows what to do.
They aren't needed. The trick is you need to use a mime type of text/html rather than image/svg+xml (or any other XML mime type).
<!doctype html>
<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
</svg>
If you use an XML mime type then XML supports namespaces and you have to define them hence the need for the xmlns attributes to distinguish whether <a> is an html <a> with a src attribute or an SVG <a> element with an xlink:href attribute. HTML just magically guesses at that.
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.
Dear Stack Overflow,
I am trying to reference individual SVG graphics which reside in different SVG files
via the tag and ID numbers in a master HTML5 page.
I want to be able to put onclicks on the use tags in the HTML page in order to
make a multiple choice quiz (and then keep a score which I know how to do),
The graphics are going to be bulky. Therefore, these need to be in an external svg files.
Here however, I have used a simple rectangle to make my question easier to
follow
Here is my HTML
<html>
<head></head>
<body>
<svg>
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>
and here is My SVG
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
<rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>
This works exactly the way I want it to in Firefox and Opera.
However, it does not work in Chrome or Safari. Not sure about Internet Explorer
Is there an alternative method that will allow me external access to the
SVG data, and scripting from the main HTML page (because I want can keep a score
over multiple SVG elements)
You could access your SVG by using an <object> tag. This link shows you how to script from html to SVG and vice versa.
I've been trying to get XPointer URIs working in an SVG file, but haven't had any luck so far. After trying something more complicated and failing, I simplified it down to just referencing an ID. However, this still fails.
The spec seems pretty clear about this implementation:
http://www.w3.org/TR/SVG/struct.html#URIReference
I found an example online of what should be a working XPointer reference within an svg document. Here is the Original. Here is the version I copied out:
<?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="500" height="200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="simpleRect" width="100px" height="75px"/>
</defs>
<use xlink:href="#simpleRect"
x="50" y="50" style="fill:red"/>
<use xlink:href="#xpointer(id('simpleRect'))"
x="250" y="50" style="fill:yellow"/>
</svg>
This should display two rectangles... one red and one yellow. I tried rendering with Firefox 3.6 and Inkscape 0.47. No success. Only the Red rectangle shows.
What am I missing?
Thanks for any help you can offer
There is currently (as of 10 March 2016, SVG 1.1 Second Edition) no support for rendering XPointers in browsers. W3Schools writes about this as follows:
XPointer Browser Support
There is no browser support for XPointer. But XPointer is used in other XML languages.
It's kind of frustrating, because all the official documentation does not bother to distinguish between browser-supported (Internet ready) features of SVG and the technically-supported, purely XML-like features of SVG.
From the linking section of the spec:
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ] -or-
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
So what is the benefit of using xpointer syntax? All svg implementions I've seen have supported the alternative (shorter) syntax shown above (#myId). The xpointer syntax seems to be less well supported.