I have the following classic SVG code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<image
xlink:href="foo.webp"
height="100"
width="100"
x="0"
y="0"
image-rendering="optimizeQuality"
/>
</svg>
However, on some browsers, webp is not yet supported (iOS and macOS I am looking at you: https://caniuse.com/?search=webp) ...
So, is there a way similar to the <picture> element to do something like this (syntax obviously wrong, but I hope it does convey the idea):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<image
xlink:href="foo.webp"
height="100"
width="100"
x="0"
y="0"
image-rendering="optimizeQuality"
/>
<fallback_to>
<image
xlink:href="foo.jpg"
height="100"
width="100"
x="0"
y="0"
image-rendering="optimizeQuality"
/>
</svg>
... without of course getting the double-http-hit problem. And without using client-side Javascript (modernizr or other).
Many thanks!
Maybe you could use <foreignObject>. Inside the element you can specify the HTML that you need, like the <picture> element.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="400">
<foreignObject x="0" y="0" width="300" height="200">
<picture xmlns="http://www.w3.org/1999/xhtml">
<source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp" type="image/webp">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp.png" alt="logo">
</picture>
</foreignObject>
</svg>
You could detect WebP support and hide the relevant <image> element based on the results.
Related
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
This works in Chromium, but in Firefox, the green rect gets cut off. It's like the browser is rendering it "inside" the image of svg o_1.
Has anyone faced this before? Workarounds?
I think I've found a workaround.
By adding a viewBox, Firefox decides to render it properly. See line 8:
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
viewBox="0 0 200 200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
I want to refer in HTML src tag to one of multiple svg elements in external file. Is it possible? How?
In HTML page:
<img src="svg5.svg#svg2" height="100px" width="100px">
Here is svg5.svg file content:
<?xml version="1.0" standalone="no"?>
<svg>
<svg id="svg1" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="blue">
</svg>
<svg id="svg2" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="red">
</svg>
9/1/2019 Update:
Tried also the following, as per #BeccaH advice:
<!DOCTYPE html>
<html>
<body>
<h1>SVG</h1>
<img src="svg5.svg//svg[#id='svg2']" height="100px" width="100px">
</body>
</html>
It didn't work.
The goal is to show image but with another color inside svg.
I tried -webkit-mask-image with background-color, but this combination does not work in svg. Here is the example:
<div class="dashboard-buttons">
<svg width="367" height="243.5" viewBox="252.5 60.5 367 243.5">
<g>
<rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';">
<image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image>
</a>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a>
</g>
</svg>
</div>
If you remove svg tags from it then this sample works and the color changed.
Do you know how to change image color inside svg correctly?
EDIT:
The following code works in Chrome, but not in Firefox:
<div class="wrapper">
<svg width="200" height="300" class="svg">
<defs>
<mask id="mask">
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==">
</image>
</mask>
</defs>
<rect width="50" height="50" style="fill:blue;" x="0" y="0"
mask="url(#mask)"></rect>
</svg>
</div>
Can't see your example, but:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Use the fill option!
EDIT:
Now I can see your code.
If you insert an image as PNG:
data:image/png
Then I doubt you can change the color with HTML directive. PNG are bitmaps and not SVG, you would have to edit the PNG itself to achieve that.
everyone!
I think I've got a problem here:
Following this tutorial, I made a path from an image (the mirror's frame) and also applied the image as a fill pattern for the svg path. I don't understand why the pattern image end up bigger, like you see on the pic. Here are the markups:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="0 0 1949 2220"
preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="mirror" height="100%" width="100%"
patternContentUnits="userSpaceOnUse"
viewBox="0 0 1 1"
preserveAspectRatio="xMidYMid slice">
<image xlink:href="mirror.jpg"
preserveAspectRatio="xMidYMid slice"
x="0" y="0"
width="1" height="1" />
</pattern>
</defs>
<path .................
and the page:
<div class="w3-container">
<div class="w3-row">
<div id="left_pallette" class="w3-quarter w3-border">
</div>
<div id="mirror" class="w3-half">
<object id="mirror_object" type="image/svg+xml" data="mirror_frame.svg">
<img src="mirror_frame.svg" onerror="this.src='mirror.jpg'"/>.
</object>
</div>
<div id="right_pallette" class="w3-quarter w3-border">
</div>
</div>
</div>
I would appreciate any ideas on how to fix this issue.
Thanks!
Your pattern is defined differently from the tutorial. Have you tried doing it the way they suggest?
<pattern id="mirror" patternUnits="userSpaceOnUse" width="1949" height="2220">
<image xlink:href="mirror.jpg" x="0" y="0" width="1949" height="2220" />
</pattern>
I'm trying to fill SVG image with a pattern in HTML, but I'm not successfull. If I fill with the pattern path, it works. But I cannot apply it onto svg image.
Could you help me please?
Here is example.
Here is example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
<defs>
<pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
<image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
</pattern>
</defs>
<image x="0" y="0" width="400" height="400" xlink:href="kosile.svg" fill="url(#image)"/>
</svg>
It makes no sense to apply a fill attribute to an embedded SVG. I assume what you were trying to do is create a tiled background on which to superimpose the linked SVG. The easiest way to do this is by adding a <rect> element filled with the background pattern, then put your embedded SVG image on top of this.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
<defs>
<!-- define a pattern using a yellow tile image -->
<pattern id="bgimg" x="0" y="0" width="60" height="60"
patternUnits="userSpaceOnUse">
<image x="0" y="0" width="60" height="60"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
</pattern>
</defs>
<!-- use this pattern to fill the SVG background -->
<rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
<!-- Embed another SVG (purple circle) on top of this background -->
<image x="40" y="40" width="120" height="120"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>