SVG path inside circle - svg

I would like to achieve the following using an inline SVG:
My rocket shape has been drawn like so:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="icon">
<path id="icon" d="M11.933 13.069c0 0 7.059-5.094 6.276-10.924-0.017-0.127-0.059-0.213-0.112-0.268-0.054-0.055-0.137-0.098-0.263-0.115-5.697-0.801-10.674 6.422-10.674 6.422-4.318-0.517-4.004 0.344-5.974 5.076-0.377 0.902 0.234 1.213 0.904 0.959 0.67-0.252 2.148-0.811 2.148-0.811l2.59 2.648c0 0-0.546 1.514-0.793 2.199s0.055 1.311 0.938 0.926c4.624-2.016 5.466-1.694 4.96-6.112zM12.942 7.153c-0.598-0.613-0.598-1.604 0-2.217 0.598-0.611 1.567-0.611 2.166 0s0.598 1.603 0 2.217c-0.599 0.611-1.569 0.611-2.166 0z"></path>
</svg>
What's the best way to place my path within a filled circle as illustrated in the above image?


This can be achieved with good old CSS.
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: #fff;
background-color: #4c8dcb;
border-radius: 24px;
padding: 8px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="icon">
<path id="icon" d="M11.933 13.069c0 0 7.059-5.094 6.276-10.924-0.017-0.127-0.059-0.213-0.112-0.268-0.054-0.055-0.137-0.098-0.263-0.115-5.697-0.801-10.674 6.422-10.674 6.422-4.318-0.517-4.004 0.344-5.974 5.076-0.377 0.902 0.234 1.213 0.904 0.959 0.67-0.252 2.148-0.811 2.148-0.811l2.59 2.648c0 0-0.546 1.514-0.793 2.199s0.055 1.311 0.938 0.926c4.624-2.016 5.466-1.694 4.96-6.112zM12.942 7.153c-0.598-0.613-0.598-1.604 0-2.217 0.598-0.611 1.567-0.611 2.166 0s0.598 1.603 0 2.217c-0.599 0.611-1.569 0.611-2.166 0z"></path>
</svg>

Related

css rotate introduces outline when using SVG clip-path or mask

Is there a way to stop this outline in firefox?
#blob { background: red; width: 500px; height: 500px; clip-path: url(#myClip); transform: rotate(20deg);}
<div id="blob"></div>
<svg>
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1"></path>
<clipPath id="myClip"><use href="#path-1"></use></clipPath>
</defs>
</svg>
This renders correctly in other browsers, just need some work around for this firefox bug
same outline appears using either clip-path or mask

As a workaround you could rotate the clipPath instead:
#blob {
background: red;
width: 500px;
height: 500px;
clip-path: url(#myClip);
}
<div id="blob"></div>
<svg viewBox="0 0 397 409">
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
<clipPath id="myClip" transform="rotate(20)" transform-origin="center">
<use href="#path-1"></use>
</clipPath>
</defs>
</svg>

Transparent icon both svg or <i> tag with colored background

Here's my problem:
I have a section with some social icons. This section is within a wider div that has a background image. Now I want to give to each icon a rounded white background but I want to keep the icon transparent, so I will have a pleasant effect, but I don't want to do it with photoshop (png image) because it would be easier and actually is not my goal.
I want to do it with HTML, Font-Awesome, and CSS.
Here's my goal:
And here's my markup and css:
HTML:
<div class="splash-image">
<div class="letterhead">
<ul class="social">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
</div>
SCSS:
.splash-image {
font-size: 1.9rem;
text-transform: uppercase;
font-weight: 100;
background-image: url(../images/myimage.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 96vh;
.letterhead {
.social {
li {
display: inline-block;
width: 30px;
height: 30px;
background: white;
i::before{
background:transparent;
}
}
}
}
}
First of all: Is it doable?

If you're very dedicated to your mission of using just those techs then it's possible to use a filter and a green screen technique to accomplish your goal. But the result is a bit crispy & I'd recommend going with an SVG solution - it's what SVG is built for.
body{
background-image: url("https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.circle{
border-radius: 50%;
margin: 0.3em;
font-size: 4em;
}
.fa-twitter{
background: white;
color: red;
padding: 0.15em 0.19em;
}
.fa-facebook{
background: white;
color: red;
padding: 0.13em 0.41em;
}
.redknockout {
filter: url(#red-knockout);
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-twitter circle redknockout"></i>
<i class="fa fa-facebook circle redknockout"></i>
<svg>
<defs>
<filter id="red-knockout">
<feColorMatrix type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
-1 1 1 0 0"/>
</filter>
</defs>
</svg>

Instead of using Font-Awesome icons you can use svg. In SVG if you draw a path where a part is drawn clockwise and the other conter-clockwise you get a hole:
body{background:gold}
<svg viewBox="0 0 26 26" width="100">
<path d="M0,0 L26,0 26,26 0,26 0,0 M21,5 5,5 5,21 21,21 21,5" />
</svg>
The same way you can create in SVG a circle with a social icon hole:
body{background:gold;}
<svg viewBox="0 0 26 26" width="30">
<path d="M2,13A11,11 0 0 0 24,13A11,11 0 0 0 2,13
M19.805,7.708
c-0.334,0.446-0.667,0.892-1.022,1.365c0.403-0.106,0.822-0.216,1.24-0.326c0.019,0.023,0.036,0.047,0.055,0.07
c-0.087,0.123-0.161,0.259-0.264,0.367c-0.331,0.353-0.784,0.642-0.98,1.056c-0.197,0.414-0.115,0.952-0.201,1.427
c-0.103,0.558-0.215,1.12-0.392,1.658c-0.555,1.682-1.577,3.028-3.007,4.072c-0.75,0.549-1.583,0.949-2.468,1.178
c-1.351,0.349-2.726,0.382-4.108,0.087c-0.786-0.167-1.515-0.448-2.216-0.823c-0.095-0.051-0.173-0.134-0.245-0.242
c1.4-0.03,2.714-0.242,3.812-1.196c-1.171-0.268-2.009-0.871-2.437-2.066c0.319-0.03,0.593-0.056,0.868-0.082
c-1.148-0.626-1.847-1.475-1.914-2.851c0.409,0.114,0.737,0.206,1.135,0.317c-0.312-0.437-0.594-0.764-0.801-1.133
C6.407,9.781,6.45,8.941,6.788,8.107c0.08-0.197,0.199-0.271,0.386-0.058c0.839,0.958,1.839,1.723,3.03,2.167
c0.796,0.297,1.65,0.439,2.483,0.63c0.042,0.01,0.17-0.164,0.187-0.265c0.077-0.449,0.081-0.915,0.198-1.351
c0.218-0.806,0.782-1.369,1.526-1.683c1.085-0.458,2.146-0.341,3.084,0.407c0.294,0.233,0.562,0.205,0.866,0.086
c0.378-0.148,0.756-0.295,1.135-0.443C19.723,7.635,19.764,7.672,19.805,7.708z"/></svg>

You can make the icon transparent using a mask. As a mask, the icon itself will be.
To make the body of the icon transparent it is necessary to fill it with black color fill ="black"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1920 1200">
<defs>
<mask id="msk1">
<rect fill="white" width="100%" height="100%"/>
<path transform="scale(4) translate(10 35)" d="M2,13A11,11 0 0 0 24,13A11,11 0 0 0 2,13
M19.805,7.708
c-0.334,0.446-0.667,0.892-1.022,1.365c0.403-0.106,0.822-0.216,1.24-0.326c0.019,0.023,0.036,0.047,0.055,0.07
c-0.087,0.123-0.161,0.259-0.264,0.367c-0.331,0.353-0.784,0.642-0.98,1.056c-0.197,0.414-0.115,0.952-0.201,1.427
c-0.103,0.558-0.215,1.12-0.392,1.658c-0.555,1.682-1.577,3.028-3.007,4.072c-0.75,0.549-1.583,0.949-2.468,1.178
c-1.351,0.349-2.726,0.382-4.108,0.087c-0.786-0.167-1.515-0.448-2.216-0.823c-0.095-0.051-0.173-0.134-0.245-0.242
c1.4-0.03,2.714-0.242,3.812-1.196c-1.171-0.268-2.009-0.871-2.437-2.066c0.319-0.03,0.593-0.056,0.868-0.082
c-1.148-0.626-1.847-1.475-1.914-2.851c0.409,0.114,0.737,0.206,1.135,0.317c-0.312-0.437-0.594-0.764-0.801-1.133
C6.407,9.781,6.45,8.941,6.788,8.107c0.08-0.197,0.199-0.271,0.386-0.058c0.839,0.958,1.839,1.723,3.03,2.167
c0.796,0.297,1.65,0.439,2.483,0.63c0.042,0.01,0.17-0.164,0.187-0.265c0.077-0.449,0.081-0.915,0.198-1.351
c0.218-0.806,0.782-1.369,1.526-1.683c1.085-0.458,2.146-0.341,3.084,0.407c0.294,0.233,0.562,0.205,0.866,0.086
c0.378-0.148,0.756-0.295,1.135-0.443C19.723,7.635,19.764,7.672,19.805,7.708z"/>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/BpeqF.jpg" width="100%" height="100%" mask="url(#msk1)"/>
</svg>

SVG backgrounds are getting cut off in IE11 when zooming

We are trying to display SVG backgrounds in internet explorer. Our images are always getting cut off when a zoom other than 100% is used. This can be reproduced using the following code:
with this svg
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
div {
width: 14px;
height: 14px;
background-size: 14px 14px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}
<div></div>
The result looks like this:
In all other browsers it renders fine. Has anyone else ever experienced this bug? Is there a workaround?

I have found one workaround which requires very little work:
Make the SVG image 2X size of the actual content (this would make the circle look like this:
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
Then use the :after pseudo element to create an inside element with 2x the desired size. So the html would be
<div class="circle"></div>
And the css would be
.circle {
width: 14px;
height: 14px;
position:relative;
}
.circle:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 28px;
height: 28px;
background-size: 28px 28px;
background-repeat: no-repeat;
background-image: url('circle.svg');
}
The extra space in the :after pseoudoelement gives IE spare canvas to draw on, but both the visible icon and the space occupied by the original container remain the same.

Why SVG's stroke width is different from border width?

Why <svg>'s 1px stroke-width is wider than <div>'s 1px border-width?
Is it possible to create an <svg> that looks exactly like the <div>below?
<svg>
<rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" />
</svg>
<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>

That's just antialiasing. You can turn it off if you want via the shape-rendering CSS property. Adjusting the co-ordinates by 0.5px may also work.
<svg>
<rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" shape-rendering="crispEdges" />
</svg>
<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red">
</div>

How to round image inside svg

I create an image inside a svg but want to round it and fill the shape (small circle).
I already did image round in html image tag using css style but not know how i can do it in side a svg or apply same css style in svg. Here is a code:
<HTML>
<HEAD>
<style>
.pic-circle-corner {
display: block;
width: 25px;
height: 25px;
/* margin: .8em auto; */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px ; /* solid #eee*/
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
</style>
</HEAD>
<BODY>
<div> picture should fill inside round shape..
<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"
width="40px" height="40px" viewBox="0 0 40 40" enable- background="new 0 0 40 40" xml:space="preserve">
<filter id="this_image" x="0%" y="0%" width="100%" height="100%">
<feImage width="28px" height="28px" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"/>
</filter>
<circle cx="46" cy="42" r="40" stroke="black" stroke-width="3" filter="url(#this_image)" />
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
</div>
<div style="padding-top:50px;">
<image class="pic-circle-corner" src="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg">
</div>
</BODY>
</HTML>
Can someone tell me a correct way.

these are some options:
1) absolute position - place the SVG path inside a container and place an absolute positioned circled div with a background image on top of the path.
HTML/SVG:
<div class="container">
<div class="circle-div"> </div>
<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" width="40px" height="40px" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
</div>
CSS:
.container {
position: relative;
}
.circle-div {
border-radius: 50%;
background-image: url('http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg');
width: 25px;
height: 25px;
background-size: cover;
background-position: 25% 25%;
position: absolute;
left: 7.5px;
top: 2.5px;
}
2) SVG clipPath - place an SVG image on top the SVG path and clip it with a circle.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<clipPath patternUnits="userSpaceOnUse" id="clip">
<circle cx="50%" cy="40%" r="13" ></circle>
</clipPath>
</defs>
<image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" x="5" y="2" width="100%" height="65%" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"></image>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
3) SVG pattern - place an SVG circle on top the SVG path and fill it with a pattern that is the image itself.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<pattern id="pf" x="0" y="0" height="100%" width="100%"
viewBox="0 0 960 420" preserveAspectRatio="xMinYMid slice">
<image x="-150" y="11" width="960" height="420" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg" ></image>
</pattern>
</defs>
<circle cx="50%" cy="40%" r="13" fill="url(#pf)"></circle>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
I think the easiest solution in this case is to go with CSS, as it requires less position-tweaking to get proper results.
demo

Resources