How do I center this loader inside the SVG - css

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)

Related

How to remove the blue outline and the shadow from a Google sign-in button in SVG format

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>

Center SVG in its viewport

I have the following SVG:
<svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Shape</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="question-controls" transform="translate(-52.000000, -1.000000)" fill="#72758D" fill-rule="nonzero">
<path d="M62,1 L54,1 C52.9,1 52,1.9 52,3 L52,13 L54,13 L54,3 L62,3 L62,1 Z M65,5 L58,5 C56.9,5 56,5.9 56,7 L56,17 C56,18.1 56.9,19 58,19 L65,19 C66.1,19 67,18.1 67,17 L67,7 C67,5.9 66.1,5 65,5 Z M65,17 L58,17 L58,7 L65,7 L65,17 Z" id="Shape"></path>
</g>
</g>
</svg>
It is a "Duplicate Icon" from Material IO.
https://material.io/resources/icons/?search=duplicat&icon=content_copy&style=baseline
However, as can you see it is not centered in its view port.
I tried by giving the same viewBox value like viewBox="0 0 100 100" with little success.

How can i rotate the Path near the given path in SVG

So i have a problem with SVG, I am trying to simply animate a path on another path, but there is a big offset in between the paths
Here is my code for SVG
<svg width="500" height="500" viewbox="0 0 132 132">
<path
id="path1"
d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
stroke="red"
stroke-width="2"
fill="transparent"
></path>
<linearGradient id="myGradient">
<stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
<stop offset="100%" style="stop-color:#00ccff; stop-opacity:0.38502708" />
</linearGradient>
<!-- I want this 👇 element to go closer to the path above 👆 -->
<path
fill="url('#myGradient')"
d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</path>
Plese use developer tools Element tab, to see, the animation.
Here is what i am expecting this to be

You need to translate back your element to place it at the top/left corner then you can apply the path animation to it.
You can do this with a g element
<svg width="500" height="500" viewbox="0 0 132 132">
<path
id="path1"
d="m 101.4187,109.72533 a 56.065571,56.065571 0 0 1 -78.831564,-8.28098 56.065571,56.065571 0 0 1 8.234505,-78.836434 56.065571,56.065571 0 0 1 78.841269,8.188024 56.065571,56.065571 0 0 1 -8.14154,78.84609"
stroke="red"
stroke-width="2"
fill="transparent"
></path>
<linearGradient id="myGradient">
<stop offset="0%" style=" stop-color:#000080; stop-opacity:1" />
<stop offset="100%" style="stop-color:#00ccff; stop-opacity:0.38502708" />
</linearGradient>
<!-- I want this 👇 element to go closer to the path above 👆 -->
<g transform="translate(-100,-100)"><path
fill="url('#myGradient')"
d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
/>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/></animateMotion>
</g>
<!-- Below the element with no animation to understand -->
<g transform="translate(-95,-100)"><path
fill="url('#myGradient')"
d="m 92.777301,95.941024 c -0.06085,0.01464 5.686103,1.71384 5.642996,1.66846 -0.04311,-0.04538 1.358822,5.781226 1.376568,5.721206 0.01775,-0.06 -4.327281,4.06739 -4.266426,4.05275 0.06085,-0.0146 -5.686104,-1.71384 -5.642996,-1.66846 0.04311,0.0454 -1.358822,-5.781231 -1.376569,-5.721209 -0.01775,0.06002 4.327281,-4.067389 4.266427,-4.052747 z"
/>
</g>

Manipulation of SVG icon's dimensions

I have the following SVG file
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 30">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z" fill="#FFF"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<g>
<path fill="none" d="M-1-1h583v403H-1z"/>
</g>
</symbol>
<path d="M85 84 127 84 127 126 85 126 "/>
<use href="#icon-ec2d25d9" x="85" y="84" width="22" height="36" fill="none" stroke="black" class="icon 4"/>
</svg>
(https://jsfiddle.net/L5xz73j4/) and I would like to modify the dimensions of the small icon inside the black rectangle to match the width and height of the rectangle. I'm generating these kinds of SVG's on the fly so I cannot start playing with the width and height attributes by hand. My question is that can I use the path element of the black rectangle to achieve this or what's the appropriate way?

I've changed the viewBox of the symbol to viewBox="0 0 60 60" acording to the size of the group inside. Now the symbol is square. In order to make the use fill the black square I've changed the width and the height of the use to width="42" height="42" i.e, the size of the black square.
I hope this is what you are asking
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 60">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<!--<g><path fill="none" d="M-1-1h583v403H-1z"/></g>-->
</symbol>
<path d="M85 84 127 84 127 126 85 126 " />
<use href="#icon-ec2d25d9" x="85" y="84" width="42" height="42" fill="none" stroke="black" class="icon 4"/>
</svg>

Change color of SVG

I have some svg image like this
circles.svg
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
And use it like this
<img src="circles.svg" width="50" alt=""/>
But i dont know how to change color
I have tried
.color{
fill:red;
}
<img src="circles.svg" width="50" alt="" class="color"/>
But it does not work, i dont want to change SVG i want only to change color by html, is that possible, not to edit primary SVG?

CSS does not apply across document boundaries. Since your SVG is in a different document, you cannot affect it's style using CSS in your HTML.
You would need to inline the SVG in your HTML file.

Try this Link
HTML
<div>
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
</div>
css
div {
color: blue;
}
div svg {
fill: currentColor;
}

Resources