Related
Goal: I want to style an SVG graphic using style classes (stroke color). I have read that this is done with color.
Problem: The style is applied to one graphic and not to another svg.
Question: I would like to know why this is?
.voted svg path {
color: green;
}
svg {
width: 40px;
}
<button class="voted">
<svg class="" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z" fill="currentColor"></path></svg>
</button>
<button class="voted">
<?xml version="1.0" encoding="utf-8"?><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 122.88 106.16" style="enable-background:new 0 0 122.88 106.16" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M4.02,44.6h27.36c2.21,0,4.02,1.81,4.02,4.03v53.51c0,2.21-1.81,4.03-4.02,4.03H4.02 c-2.21,0-4.02-1.81-4.02-4.03V48.63C0,46.41,1.81,44.6,4.02,44.6L4.02,44.6z M63.06,4.46c2.12-10.75,19.72-0.85,20.88,16.48 c0.35,5.3-0.2,11.47-1.5,18.36l25.15,0c10.46,0.41,19.59,7.9,13.14,20.2c1.47,5.36,1.69,11.65-2.3,14.13 c0.5,8.46-1.84,13.7-6.22,17.84c-0.29,4.23-1.19,7.99-3.23,10.88c-3.38,4.77-6.12,3.63-11.44,3.63H55.07 c-6.73,0-10.4-1.85-14.8-7.37V51.31c12.66-3.42,19.39-20.74,22.79-32.11V4.46L63.06,4.46z"/></g></svg>
</button>
SVG uses fill/stroke rather than color.
The only reason color works in the first case is that it has fill="currentColor" that sets the fill to whatever the color is.
.voted svg path {
fill: green;
}
svg {
width: 40px;
}
<button class="voted">
<svg class="" width="36" height="36" viewBox="0 0 36 36"><path d="M2 25h32L18 9 2 25Z" fill="currentColor"></path></svg>
</button>
<button class="voted">
<?xml version="1.0" encoding="utf-8"?><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 122.88 106.16" style="enable-background:new 0 0 122.88 106.16" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g><path class="st0" d="M4.02,44.6h27.36c2.21,0,4.02,1.81,4.02,4.03v53.51c0,2.21-1.81,4.03-4.02,4.03H4.02 c-2.21,0-4.02-1.81-4.02-4.03V48.63C0,46.41,1.81,44.6,4.02,44.6L4.02,44.6z M63.06,4.46c2.12-10.75,19.72-0.85,20.88,16.48 c0.35,5.3-0.2,11.47-1.5,18.36l25.15,0c10.46,0.41,19.59,7.9,13.14,20.2c1.47,5.36,1.69,11.65-2.3,14.13 c0.5,8.46-1.84,13.7-6.22,17.84c-0.29,4.23-1.19,7.99-3.23,10.88c-3.38,4.77-6.12,3.63-11.44,3.63H55.07 c-6.73,0-10.4-1.85-14.8-7.37V51.31c12.66-3.42,19.39-20.74,22.79-32.11V4.46L63.06,4.46z"/></g></svg>
</button>
I have a chevron svg on my site but the positioning is making the page wider than I need it. So I was looking at the elements and noticed the path is much skinnier than the actual svg element.
I want the width of the whole svg element to be only the width needed for the size of the chevron, I can supply the 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 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>
You can just take BBox and redefine viewBox attribute by the data:
const svg = document.querySelector('svg');
const path = svg.querySelector('path');
const box = path.getBBox();
svg.setAttribute('viewBox', `${box.x} ${box.y} ${box.width} ${box.height}`);
<svg viewBox="0 0 512.001 512.001" style="background: gray; width: 100px">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>
You would either have to adjust the path to fit the current viewbox or adjust the viewbox to the current path.
The latter would be approximately like this:
viewBox="117 0 280 512.001"
svg {
border: 1px solid red;
height: 90vh;
margin: 4px;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="117 0 280 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>
I'm drawing a svg in html, when i draw this i get that line
and i dont want it, how i can sove it, this is my code
html
<svg style="background-color: #fff" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 100 20" preserveAspectRatio="none">
<path fill="#f2f2f2" d="M0 30 V12 Q30 17 55 5 T100 11 V30z" />
</svg>
after the line is another dive, its like a space between svg and another div
That line isn't part of your SVG shape- the height of your shape is 30px but your viewbox is only 20px high - you just need to change viewBox="0 0 100 20" to viewBox="0 0 100 30" so that the whole shape is in your viewport.
I opened it up in illustrator and that line is actually the edge of the artboard. I resized the art board and re-exported the code. I hope this helps. Unfortunately it did cram in some extra info.
<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 1440 150" style="enable-background:new 0 0 1440 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#F2F2F2;}
</style>
<path class="st0" d="z"/>
<path class="st1" d="M0,150V60c288,16.7,552,5,792-35s456-30,648,30v95H0z"/>
<path class="st0" d="z"/>
</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.