I'm trying to create an SVG document that includes image tags referencing png files. This works if I include the absolute path of the png in every image tag but if I try putting an xml:base attribute in it doesn't seem to work in IE9. However it does seem to work Firefox and Chrome. Is there a bug in IE or is there something wrong with my syntax?
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:base="file:///C:/SVG/Devices/valves/">
<image width="40" height="56" x="10" y="10" xlink:href="motorised_valve[purple].gif"/>
</svg>
For complicated reasons I don't want to go into here, I can't put the SVG document into the same folder as the images.
Thanks for any help
Mog
Would it be acceptable in your case to embed your PNG images in your document using the data:// protocol? That would solve your problem, at the expense of potentially making the XML rather large.
Related
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 a problem with svg files, where linked images don't show up when opened with any program. Strange thing is, all has been working fine up to just a few days ago! I did noting to change the files and the referenced image is perfectly fine and sits in the same folder. Now, the following svg just shows an empty black canvas, no matter if I open it with the image viewer, an internet browser or an image processing program:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd.">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<title> state0709.svg</title>
<defs>
<image id="mol" width="6px" height="3px" xlink:href="PTCDA.svg" />
</defs>
<rect x="0" y="0" width="600" height="600" />
<use x="492" y="250" xlink:href="#mol" />
</svg>
I have absolutely no clue what I broke and why it doesn't work anymore.
Thanks for your help!
EDIT:
Ok, so apparently it is a problem with the scaling of the referenced image. It just takes the top left 6x3 corner and renders that, instead of resizing the image down to 6x3. How do I get the image to resize? I know it did it before...
Btw, size of PTCDA.svg is width 200, height 100 px.
Try adding a fill value to the rect.
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'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:
<svg width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="48" height="48"
xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
transform="scale(5.0)" />
</svg>
As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.
Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)
Is there any way to ensure that the nested SVG is never rasterized before scaling ?
Thanks :)
JSFiddle: http://jsfiddle.net/a9NRY/17/
This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.
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.