I would like to center this loader inside the grey SVG vertically and horizontally. I can't use external CSS. Just either inline CSS or another way. I tried doing myself but struggled for a while. Thanks
<svg viewBox="0 0 2560 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#F5F5F5" d="M0 0h2560v1440H0z"/>
<path opacity=".2" fill="#000" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/>
<path fill="#000" d="m26.013 10.047 1.654-2.866a14.855 14.855 0 0 0-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite"/>
</path>
</svg>
Wrap your spinner in a <symbol> with a viewBox attribute as suggested by #exaneta and place a symbol instance with a specific width and height like so:
body{
margin:0;
}
*{
border-box:border-box;
}
<svg width="100%" height="100vh" xmlns="http://www.w3.org/2000/svg" style="background:#F5F5F5">
<symbol id="spinner" viewBox="5 5 30 30">
<path opacity=".2" fill="#000" d="M20.2 5.17c-8.25 0-14.95 6.69-14.95 14.95s6.69 14.95 14.95 14.95s14.95-6.69 14.95-14.95c0-8.25-6.69-14.95-14.95-14.95zm0 26.58c-6.43 0-11.63-5.21-11.63-11.63s5.21-11.63 11.63-11.63s11.63 5.21 11.63 11.63s-5.21 11.63-11.63 11.63z" />
<path fill="#000" d="M26.01 10.05l1.65-2.87a14.86 14.86 0 0 0-7.47-2.01v3.31c2.12 0 4.1 0.58 5.81 1.57z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite" />
</path>
</symbol>
<use href="#spinner" x="50%" y="50%" transform="translate(-20)" width="40" height="40">
</svg>
The <use> element's placement is adjusted by translate(-20) (height or width/2)
I am trying to design a custom Google sign-in button. I have downloaded the Google sign-in button in SVG format.
<svg width="46px" height="46px" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>btn_google_dark_normal_ios</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.168 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.084 0" in="shadowBlurOuter2" type="matrix" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="40" height="40" rx="2"></rect>
<rect id="path-3" x="5" y="5" width="38" height="38" rx="1"></rect>
</defs>
<g id="Google-Button" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="9-PATCH" sketch:type="MSArtboardGroup" transform="translate(-608.000000, -219.000000)"></g>
<g id="btn_google_dark_normal" sketch:type="MSArtboardGroup" transform="translate(-1.000000, -1.000000)">
<g id="button" sketch:type="MSLayerGroup" transform="translate(4.000000, 4.000000)" filter="url(#filter-1)">
<g id="button-bg">
<use fill="#4285F4" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-2"></use>
<use fill="none" xlink:href="#path-2"></use>
<use fill="none" xlink:href="#path-2"></use>
<use fill="none" xlink:href="#path-2"></use>
</g>
</g>
<g id="button-bg-copy">
<use fill="#FFFFFF" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-3"></use>
<use fill="none" xlink:href="#path-3"></use>
<use fill="none" xlink:href="#path-3"></use>
<use fill="none" xlink:href="#path-3"></use>
</g>
<g id="logo_googleg_48dp" sketch:type="MSLayerGroup" transform="translate(15.000000, 15.000000)">
<path d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z" id="Shape" fill="#4285F4" sketch:type="MSShapeGroup"></path>
<path d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z" id="Shape" fill="#34A853" sketch:type="MSShapeGroup"></path>
<path d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z" id="Shape" fill="#FBBC05" sketch:type="MSShapeGroup"></path>
<path d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z" id="Shape" fill="#EA4335" sketch:type="MSShapeGroup"></path>
<path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<g id="handles_square" sketch:type="MSLayerGroup"></g>
</g>
</g>
</svg>
It looks like the following:
What do I want?
I want to remove the blue outline and the shadow.
How can I achieve this?
In your code you have lots of useles things.
Next comes the simplified code without the blue border:
As an observation: in your code you have the same id="Shape" several times. I've deleted the id of your paths. If for some reason you need the id please consider adding a number like id="Shape1" id="Shape2" etc... or wrap the paths in a group with this id.
Also I've changed the viewBox of the svg element since now the G shape was surrounded by a lot of white space.
I've also deleted the <defs> since what you have inside is used for the blue border.
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
<title>btn_google_dark_normal_ios</title>
<path d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z" fill="#4285F4" ></path>
<path d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z" fill="#34A853"></path>
<path d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z" fill="#FBBC05"></path>
<path d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z" fill="#EA4335" ></path>
</svg>
I want to receive Linear Gradient output.
But I cannot understand stop-offset attribute too accurately, to use it.
My code and live-showing output below:
<div id="progress">
<svg viewBox="0 0 100 100">
<linearGradient id="progress" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(35)">
<stop offset="30%" stop-color="#e31cf0" />
<stop offset="70%" stop-color="#4a96ef" />
</linearGradient>
<circle cx="50" cy="50" r="45" class="mask" />
<circle cx="50" cy="50" r="45" class="speed zero" />
</svg>
</div>
I was guessing that this is a kind of meter that shows the progress of something. I changed the circle into a path and animate it using the stroke-dash attribute. I changed the linear gradient into a radial gradient because it matches the circle better.
var offset = 283;
var int = setInterval(function(){
offset -= 5;
if(offset < 40) clearInterval(int);
document.querySelector('path').style.strokeDashoffset = offset;
}, 500)
<div id="progress">
<svg viewBox="0 0 100 100" width="300" height="300">
<radialGradient id="rg1" cx="20%" cy="0%" r="100%" fx="70%" fy="20%">
<stop offset="30%" stop-color="#e31cf0"/>
<stop offset="100%" stop-color="#4a96ef"/>
</radialGradient>
<rect x="0" y="0" width="100" height="100" fill="black" />
<g transform="translate(50 50)">
<path transform="rotate(180)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke="url(#rg1)" stroke-width="5" stroke-dasharray="283" stroke-dashoffset="280"/>
</g>
</svg>
</div>
How can i create the following widget in SVG?
I'm fine with the shapes itself but i'm struggling with the inset shadow on the back circle.
I've tried a radial gradient, which 'works' but it doesn't look that great and I have to fiddle with the stop values on the order of thousandths of a percent to get it exactly right and it just feels totally hacky.
Is there a better way?
Code to produce the SVG:
<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
Well you can do it the easy way with an inset shadow:
<svg width="180" height="180">
<defs>
<filter id="inset-shadow">
<feFlood flood-color="black"/>
<feComposite operator="out" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
But if you really want a 3D effect, then you'll need a lighting effect:
<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="inset-shadow">
<feFlood flood-color="black"/>
<feComposite operator="xor" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite operator="in" in2="SourceGraphic" result="map"/>
<feDiffuseLighting lighting-color="white" surfaceScale="2" diffuseConstant="1">
<feSpotLight x="-30" y="-30" z="230"/>
</feDiffuseLighting>
<feBlend mode="multiply" in="SourceGraphic" />
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
<path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
</path>
</svg>
Draw a pale grey stroked circle on a darker grey background, apply a gaussian blur filter, and clip the results with a clipPath:
<svg width="360" height="360" viewBox="0 0 180 180">
<defs>
<!-- Gaussian blur filter used to soften the shadow edges -->
<filter id="blur" filterUnits="userSpaceOnUse" x="-90" y="-90"
width="180" height="180">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<!-- Annular clip path for the progress meter background -->
<clipPath id="ring" clip-rule="evenodd">
<path d="M0-81A81 81 0 0 1 0 81A81 81 0 0 1 0-81z
M0-63A63 63 0 0 1 0 63A63 63 0 0 1 0-63z" />
</clipPath>
</defs>
<!-- Set orgin to centre of drawing -->
<g transform="translate(90,90)">
<!-- Start with pale yellow background -->
<rect x="-90" y="-90" width="180" height="180" fill="#e8e0ce"
stroke="none" />
<!-- Draw the progress ring on top, and clip using the above clip path -->
<g clip-path="url(#ring)">
<!-- Dark grey background -->
<rect x="-85" y="-85" width="170" height="170" fill="#433"
stroke="none" />
<!-- Lighter grey circle with blur filter applied -->
<circle cx="0" cy="2.5" r="72" stroke="#655" stroke-width="18"
stroke="#655" fill="none" filter="url(#blur)"/>
</g>
<!-- Progress bar and text -->
<path class="main-arc" d="M 0 -72 A 72 72 0 1 1 -4.52 -71.86"
style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"
fill="transparent" stroke-width="18" stroke="#b65"
stroke-linecap="round" />
<text x="0" y="0" font-size="40" font-family="'Trebuchet MS', sans-serif"
fill="#655" text-anchor="middle" dominant-baseline="central">
20%
</text>
</g>
</svg>
I'm working on a site redesign and am using SVGs to render some of the graphics in the design. For some reason, the SVG is being shifted down in WebKit browser windows by about 31px as compared to Firefox. Screen capture:
Here is the code:
<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" x="2" y="2" viewBox="-2 0 1002 704" xml:space="preserve" preserveAspectRatio="xMidYMid meet" style="min-width:980px; max-width: 1800px;">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="10%" stop-color="#ff7405" stop-opacity="1"/>
<stop offset="90%" stop-color="#f89512" stop-opacity="1"/>
</linearGradient>
<filter id="shadow1" y="-1%" x="-1%" width="110%" height="150%">
<feOffset in="SourceAlpha" dx="-2" dy="4" result="offset" />
<feGaussianBlur in="offset" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" result="shadow" type="matrix"
values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 .6 0"/>
<feMerge>
<feMergeNode in="shadow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- MAIN BOX -->
<path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1); filter: url(#shadow1);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
<!-- STROKE -->
<path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
<!-- CONTACT BOX -->
<svg x="290" y="490">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFC80C" style="stroke: #F26222; stroke-width: 3px;" stroke-miterlimit="10" d="M107.7,68.1l456.9-19.3 c9.1,0,16.5,7.9,16.5,17.5l-8.2,75.4c0,9.7-7.4,17.5-16.5,17.5L116,143.5c-9.1,0-16.5-7.9-16.5-17.5l-8.2-40.3 C91.3,75.9,98.6,68.1,107.7,68.1z"/>
</svg>
<!-- NAV BOX -->
<svg y="-40" x="230">
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="5%" style="stop-color:#F68A1F"/>
<stop offset="95%" style="stop-color:#F99F1B"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#gradient2);stroke:#FFC80C;stroke-width:2;stroke-miterlimit:4;" d="M69.2,90.5l580.3-4.8c7.7,0,11.5,1.9,9.8,8.8l-6.7,29c-2.1,5.5-6.2,7.1-13.9,7.1l-564.2-9.4c-5.6,0-7.7-1.8-9.5-7.1l-3.8-13.5 C59.1,92.9,61.4,90.9,69.2,90.5z"/>
</svg>
</svg>
</svg>
When I look at this is web inspector, I see nothing that would be making the SVG dropdown like this. Any ideas?
The issue turned out to be the preserveAspectRatio setting I had in the SVG. I had it set to: preserveAspectRatio="xMidYMid meet" which made the elements in the SVG render in the middle of the viewBox. From MDN:
xMidYMin - Force uniform scaling.
Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
Align the of the element's viewBox with the smallest Y value of the viewport.
Changing this setting to xMinyMin made the elements in the SVG render at the top and left of the viewBox.
From MDN:
xMinYMin - Force uniform scaling.
Align the of the element's viewBox with the smallest X value of the viewport.
Align the of the element's viewBox with the smallest Y value of the viewport.
preserveAspectRatio on MDN