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,
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?
I have this file named loadingReviewButtonSpinner.gif, and this file is saved on my computer in the folder where I have my project images (assets/images), but I'm trying to reference to this file in my SVG, and it isn't working.
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="loadingReviewButtonSpinner.gif"
/>
</svg>
I have also uploaded this same image (loadingReviewButtonSpinner.gif) to a server online, and when I do the reference to the online image, it working 100%
<svg
<image
width="70" height="70"
transform="translate(30.1 -7.5)"
href="https://tinypic.host/images/2022/05/18/animation_500_l1ki69jf.gif"
/>
</svg>
But I really need it to work for me referring to the folder where my project is.
And I already tried so many options, but none of them is working...
For example, I tried:
href="file://loadingReviewButtonSpinner.gif" (and the variations with the path)
href="//..//..loadingReviewButtonSpinner.gif"
href="file:///loadingReviewButtonSpinner.gif"
I did what was said in the comment and it worked.
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.
I tried to do everything, but I really can't get a way, how to change font size in drawString element. See the example below please
<illustration width="20" height="20">
<image file="checkbox.png" x="10" y="20" width="7" preserveAspectRatio="true" />
<drawString x="20" y="20">YES</drawString>
<image file="checkbox.png" x="10" y="10" width="7" preserveAspectRatio="true" />
<drawString x="20" y="10">NO</drawString>
</illustration>
This is my code, however I have really no idea where the font-size comes from. And I am unable to find how to change font size for words "YES" and "NO". Can anybody help? Thank you a lot
The problem can be resolved by using
<setFont name="fnt1" size="11"/>
before element.
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]]