I put the following code into a code cell in Google Colab:
%%svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(100,100,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>
The result is properly executed and rendered but the code itself is embellished with red markings at the beginning of each tag and there is a red vertical line at the right border of the cell to indicate some warnings.
The code itself has been validated by https://validator.w3.org/
Please help me understand what is wrong.
You are missing the namespace: xmlns="http://www.w3.org/2000/svg" in the root element (<svg>).
A SVG document is a XML document, which is a general markup language. The application that reads the file/document needs to know what "language" the element uses.
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="110">
<rect width="300" height="100" style="fill:rgb(100,100,255); stroke-width:3; stroke:rgb(0,0,0)" />
</svg>
The red markings are gone now. It was only a Colab bug after they introduced a new feature highlighting syntax issues. This new feature treated the code as written in Python.
Related
Note: This is a pretty unique problem, and I am not sure if this is even possible to solve.
Problem is, I need to embed a video file in a web page. I have the limitation that I can only set the src of an <img> tag, and need to embed a video that way.
Playing a video in an SVG itself is possible like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="300">
<foreignObject width="400" height="300">
<video xmlns="http://www.w3.org/1999/xhtml" width="400" autoplay="" loop="" muted="" crossorigin="anonymous">
<source src="data:video/mp4;base64,${content}"></source>
</video>
</foreignObject>
</svg>
That itself works (see the demo), but if I include it in an <img> tag, this happens:
(Screenshot in case it doesn't work on your browser: )
Is there a way to fix that, or is that just impossible? If it is limited by something, where can I read up on that limitation?
So given this HTML, the background image loads just fine in Firefox, IE and Chrome. But in Safari, it just ignores it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
<image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
</svg>
</body>
</html>
Now I thought it might be a server issue, not giving the correct headers, but I've checked and it looks good (image/svg+xml). So I'm at a bit of a loss... Any ideas?
Safari struggles with deeply-nested SVG <image> elements.
See, for instance, the comments here: Embed SVG in SVG?
Your first <image> loads another SVG, which itself includes an <image> that loads the background photo. If you merge the innermost <image> element (the photo) into the outermost SVG, it works fine.
I've submitted a bug report with Apple via the Apple Bug Reporter with a Bug ID of 21959574. Hopefully someone at Apple will take note and fix the underlying issue.
I'm currently working with a Swiss map in SVG format. The <svg> tag is directly embedded inside a <div>.
In Chromium (Linux), everything just looks fine, but in Firefox (Linux) only a part of the SVG is shown. The SVG markup itself seems to be valid.
Chromium:
Firefox:
I created a jsfiddle with the source code for easier testing: http://jsfiddle.net/MKRXN/
Is this a Firefox issue, or is it some problem with the SVG? In any case, how can I get this to work correctly?
You should set height and width to your parent div and then set the svg both height and width to 100%:
HTML:
<div id="map" style="height: 500px;width:600px;">
SVG:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
id="svg_main" style="height: 100%;width: 100%">
Check this code: http://jsfiddle.net/Kgs6J/
We display SVG images in MediaWiki using a template with this code:
{{#tag:svgfile||src={{{1}}}|height={{{height|300px}}}|width={{{width|600px}}}}}
where {{{1}}} is the uploaded file.
Now we want to be able to rescale the image, just like we do with JPGs, etc, using:
[[Image:<file name>.JPG|200px]]
Does anyone know how to do that?
Our current workaround is simply to recreate the SVG (in Visio) at a different size which is quite time consuming!
Update: code on page is:
<p><b>{{SVG|Bitmap VS SVG.svg|height=300px|width=400px}}</b></p>
<p>
<a class="external autonumber" href="<url>index.php?title=Special:Upload&wpDestFile=Bitmap VS SVG.svg">
<iframe src="/mediawiki/images/6/6b/Bitmap_VS_SVG.svg" width="400px" height="300px" frameborder="0"></iframe>
</a>
desc
</p>
OK, there are two parts to this solution and I can only help you with the first part, but here it is:
Browsers (Firefox, Chrome & Opera) will resize the image to fit the available space if you remove the explicit size from the SVG file and replace it with a viewBox. Here's what that Bitmap_VS_SVG.svg file on Wikipedia has at the top of it:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638">
And here's what it needs to be for automatic scaling:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1063 638">
You can see the difference in the context of the iframe as generated by your template above in this example page.
Now the second part of this is how you can get it all to work on MediaWiki, and for that I can be less help. I signed up for a Wikipedia account to try some stuff out but the default file embedding just creates a PNG version of the image, and it didn't seem like your particular template was available. So to get this working for you, you're now going to need the help of someone who understands MediaWiki templates.
6 years after the question has been answered, it works as expected :
[[Image:fooobar.svg|200x200px]]
I've got a linearGradient in the defs section of my SVG file, and reference it with fill="url(#myGradientName)". That works great so far.
I think I should be able to put my whole defs section in its own SVG file, and then just reference that from all my SVG images. That is, something like:
styles.svg:
<svg xmlns=...>
<defs>
<linearGradient id="myGradient" ...>
</linearGradient>
</defs>
</svg>
image.svg:
<svg xmlns=...>
<rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>
But I can't seem to get the style to apply. Do I have the wrong syntax for IDs external to this file (styles.svg#myGradient)? Do I need to explicitly include the file first somehow?
I've been pouring over the SVG spec and it looks like this should be possible, but none of the examples actually show it being done.
Edit: The FOP FAQ suggests that the correct syntax is fill="url(grad.svg#PurpleToWhite)", but that doesn't work in Gecko or Webkit. Is that correct and nobody supports it, or am I doing something else wrong?
It looks like this is only supported under Firefox 3.1.
You do need to say fill="url(styles.svg#myGradient)". That works in Firefox 4 beta 6 and I imagine it worked in Firefox 3.5. But Chrome (7.0.517.41 beta) and the IE9 beta (9.0.7930.16406) still do not support this. It looks like they both look for #myGradient in the current document instead of actually going to the specified URL. Gross.
Here are the complete files I used to test this:
styles.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient">
<stop offset="0" stop-color="red" />
<stop offset="1" stop-color="black" />
</linearGradient>
</defs>
</svg>
image.svg
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="url(styles.svg#myGradient)"/>
</svg>
Actually, the FOP FAQ is right, the correct syntax is embracing the URI with url(...). Just checked with my Firefox, and it handles fills only with surrounding url(). It would be a bug in Safari or Opera, if the'd handle it differently.
I coincidentally filed a similar question, but with similarly little success.
Cheers,