Can you help me align the icon into the middle of the circle?
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M11.5 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2 12.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zm9 2v-7h1v7h-1zm0 3V16h1v1.5h-1z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M7.92 2.514A1 1 0 0 1 8.794 2h1.412a1 1 0 0 1 .874.514l7.209 12.977a1 1 0 0 1-.042 1.04l-.683 1.024a1 1 0 0 1-.832.445H2.267a1 1 0 0 1-.832-.445L.753 16.53a1 1 0 0 1-.042-1.04l.437.242-.437-.242L7.92 2.514zM10.206 3H8.794L1.585 15.976 2.267 17h14.465l.683-1.024L10.205 3zM9 12.5V7h1v5.5H9zM9 15v-1.25h1V15H9z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24"><g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M9.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM2 10.5a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" clip-rule="evenodd" fill="#FFF"/><path fill-rule="evenodd" d="M9 14.75V13.5h1v1.25H9zM9.5 7A1.5 1.5 0 0 0 8 8.5H7a2.5 2.5 0 1 1 3.118 2.423.221.221 0 0 0-.104.058.07.07 0 0 0-.014.02v1.249H9V11c0-.574.457-.94.872-1.046A1.5 1.5 0 0 0 9.5 7z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
Related
I have a problem when trying to convert an svg into a font with svgicons2svgfont
I've tried formatting the svg so many times. All the other icons work perfectly. I have no clue what is going on.
Here is the SVG
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity=".8" clip-path="url(#a)">
<path d="M9.112 6.885a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001Z" fill="#0B2343"/>
<path d="M10.998 6.9h2.571M.5 6.9h2.57M7.035 2.936V.366M7.035 13.434v-2.57M9.92 4.01l1.817-1.818M2.332 11.603l1.817-1.817M9.92 9.786l1.817 1.817M2.332 2.192 4.149 4.01" stroke="#0B2343" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="a"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath>
</defs>
</svg>
It will be amazing if you can help me to find what is causing this!
Thanks
Thanks to the suggestion of Robert, I could solve the issue:
Manually remove the clipPath element.
using svgviewer.dev to format the svg
This was the final result and now it renders properly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14" xml:space="preserve">
<path class="st0" d="M9.078 6.985a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001zM13.534 7.5h-2.57a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM3.036 7.5H.466a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM7 3.536a.5.5 0 0 1-.5-.5V.466a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM7 14.034a.5.5 0 0 1-.5-.5v-2.57a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM9.886 4.61a.498.498 0 0 1-.354-.854l1.818-1.817a.5.5 0 1 1 .707.707l-1.818 1.817a.498.498 0 0 1-.353.146zM2.298 12.202a.498.498 0 0 1-.354-.853L3.761 9.53a.5.5 0 1 1 .707.708l-1.817 1.817a.498.498 0 0 1-.353.146zM11.703 12.202a.498.498 0 0 1-.353-.146l-1.818-1.817a.5.5 0 1 1 .707-.708l1.818 1.818a.5.5 0 0 1-.354.853zM4.115 4.61a.498.498 0 0 1-.354-.147L1.944 2.646a.5.5 0 1 1 .707-.707l1.817 1.817a.5.5 0 0 1-.353.853z"/>
</svg>
Thanks!
I have the following svg icon that I want to change the color of to #2F855A:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
How do I do that?
.icon{
width:100px;
height:100px;
}
<svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
You need to use stroke attribute on svg. You can choose any value you want. for example stroke="#2f2f2f will set the color as dark gray.
I have this SVG image and I need to erase "all" colors, including the white light on front, vest and belly, seeing only the outlines' image. I need it clean to use on a navbar project I'm making. This is the image I need to edit
you can use a filter to:
turn your image into greyscale:
<feColorMatrix type="matrix"
values="0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0"/>
then use a descrete color transformation to turn black pixels black and everything else white:
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
<feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>
then inverse all this to have the outline white and everything else black:
<feColorMatrix type="matrix" values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0"/>
and finally, create a mask from this filtered image and apply it to your image.
<mask id="mask" viewBox="0 0 150 206">
<rect width="150" height="206" fill="black"/>
<g filter="url(#nocolor_inv)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</mask>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<filter id="nocolor_inv" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feColorMatrix type="matrix"
values="0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0.33 0.33 0.33 0 0
0 0 0 1 0"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncR>
<feFuncG type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncG>
<feFuncB type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 "></feFuncB>
</feComponentTransfer>
<feColorMatrix type="matrix" values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0"/>
</filter>
<mask id="mask" viewBox="0 0 150 206">
<rect width="150" height="206" fill="black"/>
<g filter="url(#nocolor_inv)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</mask>
<g mask="url(#mask)">
<!-- your image here -->
<circle cx="75" cy="103" r="65" fill="red" stroke="black" stroke-width="5"/>
</g>
</svg>
I've tried to fill this SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{fill:#d1d1d1}
</style>
</defs>
<path id="iconfinder_heart_226577" d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z" class="cls-1" transform="translate(-1.372 -7.999)"/>
</svg>
With color in the middle, but I was only able to change the color of the stroke.
I've tried a lot of answers here but I didn't understand what I'm doing wrong.
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{
fill:#EB6320;
stroke: none;
type: path;
}
</style>
</defs>
<path
id="iconfinder_heart_226577"
d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z"
class="cls-1"
transform="translate(-1.372 -7.999)"/>
</svg>
That is because there is another heart drawn on the inside. It is the last half of the path:
-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z
Replace your path with just the beginning and it should work fine:
M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm
I have this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>img</title>
<g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
<path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
<path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
</g>
</svg>
But react skip all properties with -, like: stroke-width="2"
Use camelCase. For example: strokeWidth instead of stroke-width. I've made a fiddle with working example.