I'm trying to get an image clipped by a external svg file.
I can get it to work applying eg. a polygon directly to the css, but when I try to link it to an external svg, it's not working.
This is my image that needs to be clipped:
<img src="{{ asset('/images/hero.jpg') }}" class="hero-image">
This is my svg
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 706" style="enable-background:new 0 0 1366 706;" xml:space="preserve">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>
and here is my css
.hero-image {
#apply absolute w-full h-full;
clip-path: url("#bg-clipping");
}
Please save me, heroes of Stackoverflow. I've been struggling for a loooooong time now.
If the SVG is on a different URL, you're probably out of luck. Firefox is currently the only browser that supports this (CanIUse chart footnote 2).
If you're OK with it only working in Firefox, you can define the clip-path like so.
.hero-image {
clip-path: url("path/to/svg.svg#bg-clipping");
}
Interesting caveat: while it does work with relative URL's (as demonstrated here), it doesn't work with absolute URL's to a different domain (demo here). I can't find an explanation for this in the spec, it appears to be a bug.
When the SVG is on the same page as the image, it should work fine. Browser support is better.
body {
margin: 0;
}
.hero-image {
min-height: 706px;
clip-path: url("#bg-clipping");
}
<img src="https://picsum.photos/id/1015/1366/706" class="hero-image">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1366 706">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>
I have made a svg icon for search in illustrator, and want to use it in my website. I have place it in the html can see the icon.
<div id="search-btn">
<img src="svg/search.svg">
</div>
But since I made it in black, I want to change the color of the magnifiying glass and the background. How do I manipulate the colors of the svg using css? I am very new to svg and your help will be very valuable. Thank you.
search icon:
svg code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>
As said in the comments on this answer
CSS does not apply cross-document and the img is a separate document.
Images must be self contained in a single file to preserve privacy. –
Robert Longson
So this means you won't be able to include your SVG in your img tag and customize it using CSS on the page. So you have two options:
Inline the SVG code, which means scrapping the img tag. You can then target the SVG as below.
#search-btn svg {
fill: blue;
background: grey;
width: 100px;
}
<div id="search-btn">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
</svg>
</div>
Or you could add styles to the SVG file itself, as below, but this is similar to simply editing the file in Illustrator to get the colours you want.
<div id="search-btn">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<style>
#XMLID_10_ {
fill: blue;
}
</style>
</defs>
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z" />
</svg>
</div>
To set the background-color of your <svg> you have to use the background or background-color property. To set the color of the icon you have to use the fill property. See the following example:
svg {
background:yellow;
fill:red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path id="XMLID_10_" d="M98.2,89.7L63,54.5c-0.1-0.1-0.1-0.1-0.2-0.2c4-5.6,6.3-12.4,6.3-19.8c0-19-15.4-34.4-34.4-34.4
c-19,0-34.4,15.4-34.4,34.4c0,19,15.4,34.4,34.4,34.4c7.3,0,14-2.3,19.6-6.1c0.1,0.1,0.1,0.2,0.2,0.3l35.2,35.2
c2.4,2.4,6.2,2.4,8.5,0l0,0C100.6,95.9,100.6,92.1,98.2,89.7z M7.3,34.5c0-15.1,12.3-27.4,27.4-27.4c15.1,0,27.4,12.3,27.4,27.4
c0,15.1-12.3,27.4-27.4,27.4C19.6,61.9,7.3,49.6,7.3,34.5z"/>
</svg>
You could use classes for svg elements.
Adobe Illustrator for example offers the possibility to create SVG internal CSS.
But you can also write the style definitions in your own stylesheet.
To set the background use the fill property, like sebastianbrosch mentioned.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<style>
.orange {
fill:#f66d00;
}
</style>
</defs>
<path class="orange" d="M98.2, ... ,34.5z"/>
</svg>
I have a simple button that contains the word "Send" as well as a small paper plane icon. This icon is positioned properly when viewed in Chrome, but when viewed in Internet Explorer the svg (paper plane) is overlaying the text. How do I make the paper plane float the right of the button in Internet Explorer?
Here's a link to the page on my server
Heres the codepen
The HTML for the button is:
<button>
<!-- <p>Fire Away!</p>-->
<p>Ready, Aim...</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</button>
Thanks for your help
This style causes the problem in IE:
button svg {
width: auto;
}
Hard-coding a width fixes it:
button svg {
width: 30px;
}
Also, remove the p tag from the button. Buttons should contain non-interactive phrasing content only.
Updated CodePen
Despite the html syntaxes. Here's another approach to the problem.
Using anchor tag with svg attached to it.
Test: http://jsfiddle.net/vfL0pyq5/2/
<a href="http://google.com/">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" width="100" height="100">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</a>
Of course, you need to apply the CSS for it.
i'm having an issue with 3 SVG icons, and i don't know exactly why, because the same css is being apply in other icons, but they are working 100%.
The following problem is happening in IE9:
Chrome:
http://i.stack.imgur.com/gYfsb.png
IE9:
http://i.stack.imgur.com/q2220.png
In my search i found that i need add this metadata in the SVG tag:
xmlns="http://www.w3.org/2000/svg" version="1.1"
But didn't work.
The other icons is from fontastic
The codes:
1:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M340.377,292.154H227.178v-124.4h36v88.4h77.199V292.154z M389.404,378.858 c29.393-32.142,47.327-74.937,47.327-121.924c0-99.814-80.915-180.73-180.731-180.73c-99.815,0-180.73,80.916-180.73,180.73 c0,46.986,17.935,89.781,47.326,121.924c-9.047,22.51-20.913,52.037-28.938,72.002c-1.211,3.014-0.317,6.465,2.204,8.513 s6.086,2.219,8.786,0.413c18.391-12.305,45.747-30.606,65.463-43.797c25.548,13.824,54.801,21.677,85.889,21.677 s60.342-7.853,85.89-21.677l65.463,43.797c2.701,1.807,6.264,1.643,8.786-0.404c2.523-2.047,3.418-5.499,2.206-8.515 L389.404,378.858z M256,392.666c-75.013,0-135.73-60.707-135.73-135.731c0-75.013,60.706-135.73,135.73-135.73c75.013,0,135.731,60.704,135.731,135.73C391.731,331.945,331.026,392.666,256,392.666z M174.875,62.454c-12.251-7.292-26.556-11.491-41.848-11.491c-45.287,0-82,36.713-82,82c0,15.057,4.068,29.158,11.153,41.284C83.734,123.916,124.338,83.614,174.875,62.454z M449.82,174.246c7.085-12.126,11.152-26.227,11.152-41.283c0-45.287-36.713-82-82-82c-15.292,0-29.597,4.199-41.847,11.491C387.662,83.613,428.266,123.916,449.82,174.246z"></path>
</svg>
2:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" width="20px">
<path d="M407.448,360.474c-59.036-13.617-113.989-25.541-87.375-75.717c81.01-152.729,21.473-234.406-64.072-234.406c-87.231,0-145.303,84.812-64.072,234.406c27.412,50.482-29.608,62.393-87.375,75.717c-59.012,13.609-54.473,44.723-54.473,101.176h411.838C461.919,405.196,466.458,374.083,407.448,360.474z"></path>
</svg>
3:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M407.447,380.817c-50.919-11.622-112.919-41.622-94.652-80.682c11.732,19.236,48.084,30.361,76.4,13.736c-81.506-20.57,40.066-161.795-66.458-240.959c-38.877-29.041-95.209-29.373-133.474,0c-106.524,79.164,15.048,220.389-66.458,240.959c28.316,16.625,64.723,5,76.4-13.736c18.268,39.064-43.786,69.072-94.652,80.682c-59.041,13.475-54.473,52.025-54.473,80.176h411.838C461.919,432.843,466.489,394.294,407.447,380.817z"></path>
</svg>
I don't believe this is a problem with the CSS, because the other icons is with the same style.
Have you tried setting a height or at least a max-height? It's hard to say without seeing the code for the page, but it looks like the SVG element is taller than it needs to be (with the image itself scaling down into the center based on the width you've applied).