Cut sharped neon text and svg effect - html

I am developing a Neon website. There is a option for texts and SVGs to do the cut sharped effect like these example images:
I am trying to do the same effect on my neon texts and svgs, but unable to make it perfect.
First Try:
filter: drop-shadow(rgb(179, 179, 179) 2px 0px 0px) drop-shadow(rgb(179, 179, 179) -2px 0px 0px) drop-shadow(rgb(179, 179, 179) 0px 2px 0px) drop-shadow(rgb(179, 179, 179) 0px -2px 0px);
This drop-shadow doesn't work fine, because it's displaying like 3/4 shadow layers:
2nd Try:
-webkit-text-stroke: 1px rgb(179, 179, 179);
stroke also doesn't work perfect, it's weird.
Can someone help me to achieve cut sharped effect on text and svgs like the example image I have shown above? I am stuck on it.


You might use svg filters as described by
Sara Soueidan (SVG Filter Effects: Outline Text with )
Svg filters could be applied to svg and html elements.
body {
background-color: #222;
}
h1,
h2{
font-family: 'Kaushan Script', cursive;
color: #fff;
text-align:center;
font-size: 12vw;
margin:0
}
h1{
font-size: 20vw;
}
.outline{
filter: url(#outline);
}
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<h1 class="outline">Hello</h1>
<h2 class="outline">World</h2>
<svg viewBox="0 0 100 100">
<filter id="outline">
<feMorphology in="SourceAlpha" result="dilated" operator="dilate" radius="5" />
<feFlood flood-color="magenta" flood-opacity="1" result="neon" />
<feComposite in="neon" in2="dilated" operator="in" result="outline" />
<feMerge>
<feMergeNode in="outline" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>
However: svg filters are infamous for introducing massive performance hits.
So you should not apply them to many elements.


For SVGs it's easy. Just draw the paths stroked, before you draw the fills.
You have to draw all the strokes before any of the fills though. Otherwise the stroke for one element will be on top of the previous element's fill.
<svg viewBox="0 0 203.2 152.4">
<defs>
<g id="hello">
<path d="m 153.91272,38.02268 c -2.12093,1.573594 -4.03661,4.173443 -7.04696,3.626107 1.29993,-2.668267 2.66827,-5.062866 2.66827,-8.073218 0,-2.052513 -0.4105,-3.489272 -2.46302,-4.036609 0.75259,-0.410503 1.5736,-0.821005 1.5736,-1.847262 0,-1.847261 -2.25777,-2.531432 -3.76294,-2.463015 -4.17345,0.205251 -9.09948,2.052513 -12.794,5.062865 -3.83136,2.941935 -6.36279,6.36279 -6.22596,11.494073 0.27367,6.225956 3.55769,9.783645 7.11538,9.783645 4.31028,0 7.66272,-2.189347 10.53623,-5.131283 4.99445,0 8.00481,-1.64201 11.08357,-5.541785 z m -12.58874,-5.336533 c 0.27367,0.136834 -2.94194,4.447111 -2.94194,8.0048 0,1.163091 0.34209,2.052513 0.82101,3.147187 -1.5736,1.436759 -3.01036,2.736684 -5.26812,2.736684 -1.71043,0 -3.01035,-0.615754 -3.01035,-2.59985 0,-2.12093 1.29992,-4.789197 2.8051,-6.294373 2.05251,-1.984096 5.26812,-3.626106 7.5943,-4.994448 z"/>
<path d="m 113.6151,31.728307 c 3.2156,-7.046961 7.11537,-13.2045 10.46781,-14.84651 -1.23151,3.899774 -5.47337,10.467816 -10.33098,14.983344 z m 13.34133,7.252213 c -2.73668,2.463015 -8.0048,6.84171 -11.76774,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.84652,-14.36759 16.62536,-20.388295 17.10428,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.68897,6.3627897 -14.70968,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.31508,-6.910127 16.07802,-10.809901 z"/>
<path d="m 93.090027,31.728307 c 3.2156,-7.046961 7.115373,-13.2045 10.467813,-14.84651 -1.23151,3.899774 -5.473373,10.467816 -10.330983,14.983344 z m 13.341333,7.252213 c -2.73668,2.463015 -8.004803,6.84171 -11.767743,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.846513,-14.36759 16.625363,-20.388295 17.104283,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.688973,6.3627897 -14.709683,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.315083,-6.910127 16.078023,-10.809901 z"/>
<path d="m 85.974747,38.364766 c -3.6261,2.873518 -9.373141,7.867966 -14.230755,7.867966 -2.189347,0 -4.447112,-0.889422 -4.24186,-3.489272 l 0.136834,-1.505176 c 13.136081,-4.310277 16.488521,-9.373143 16.488521,-12.72558 0,-2.736684 -2.73668,-3.284021 -4.92603,-3.284021 -8.894224,-0.06842 -18.814704,9.099474 -18.541035,18.062114 0.136834,4.515528 2.463015,8.96264 7.457464,8.96264 6.773292,0 14.299171,-6.431207 18.472621,-11.288821 z m -17.925278,-0.47892 c 1.847261,-4.515528 5.815453,-7.799549 9.236308,-8.688971 0.47892,-0.136835 0.82101,0.273668 0.82101,0.752588 0.0684,1.16309 -4.036614,5.88387 -10.057318,7.936383 z"/>
<path d="m 39.861688,39.254188 c -2.531432,4.789197 -3.626106,7.936384 -3.968191,9.988897 -0.342086,2.052512 0.06842,3.010352 1.231507,3.420854 1.778845,0.615754 5.268117,-2.736683 7.457464,-2.257764 C 44.3088,49.10625 43.82988,47.532657 43.82988,46.301149 c 0,-2.052513 2.531433,-5.268116 3.557689,-7.046961 2.805101,-0.205251 4.926031,0 6.978544,0.47892 2.189348,-3.557689 4.994449,-6.636459 8.210052,-9.167892 -2.805101,-1.710427 -6.157539,-1.64201 -9.304725,-1.710427 l 7.389046,-9.099474 c 5.131283,-6.294373 5.610203,-7.594298 5.610203,-9.7836447 0,-0.752588 -0.273669,-1.573594 -1.163091,-1.573594 -1.436759,0 -4.310277,3.8313577 -5.131283,4.9260317 L 47.592821,28.854789 37.056587,30.086297 44.78772,21.876245 c 2.736683,-2.941935 6.841709,-7.046961 6.841709,-11.288821 0,-3.3524377 -1.710427,-6.7048757 -7.389046,-6.7048757 -5.883871,0 -14.504425,1.64201 -20.183044,3.489272 -3.899775,1.231508 -15.3254311,4.9944477 -17.7884461,7.7995487 -1.231508,1.642011 -2.326182,5.541785 -2.326182,7.525881 0,1.231508 0.47892,3.147187 2.052513,3.147187 0.95784,0 1.915679,-0.547337 2.736684,-0.95784 4.7207801,-2.394598 4.2418601,-2.463015 9.3731431,-4.24186 0.821005,-0.273668 1.710427,-0.684171 1.710427,-1.64201 0,-0.615754 -0.478919,-0.821005 -0.957839,-1.026257 11.220404,-4.652362 19.840959,-7.183795 23.467065,-7.183795 0.821005,0 2.394598,0.273668 2.394598,1.505176 0,1.368342 -1.984095,3.762941 -2.873518,4.72078 -6.020704,6.84171 -10.946736,12.178244 -13.546585,14.709676 -10.399399,1.984096 -10.467816,2.463016 -11.220405,2.463016 -0.547336,0 -1.094673,-0.47892 -1.573593,-0.47892 -1.847262,0 -3.831357,3.626106 -3.831357,5.1997 0,2.326181 2.189347,3.215603 6.978544,2.805101 -0.95784,1.847261 -5.815454,6.568041 -5.815454,8.48372 0,1.573593 1.847262,2.941935 3.352438,2.941935 1.642011,0 3.147187,-2.736684 3.968192,-3.899774 l 7.115378,-8.346887 z"/>
</g>
</defs>
<use xlink:href="#hello" fill="none" stroke="red" stroke-width="8"/>
<use xlink:href="#hello" fill="black"/>
</svg>


You can add multiple shadows with text-shadow just by comma-separating them like so:
.neon {
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff;
}
Just play with the shadow colors and spacing until they match your preferences.
Or view this on Codepen.

Related

Icon display with different color on Iphone and on other devices

i have a problem with some icon color displaying on Iphone.
Here the html code :
<button type="submit" aria-label="Start Searching">
<i className={`icon-search`} aria-hidden="true" />
</button>
Here the svg of the icon :
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<g id="icomoon-ignore">
</g>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
The icon color is correctly displayed ( that to say dark gray ) on Android or any desktop ( including Safari ) but he is fully white on Iphone ( Iphone 8, IOS 15.1 )
Does any one have a solution ?

I was investigating and version feature is deprecated in some browsers, maybe can be that:
See the compatibility table:
Extracted from: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/version#browser_compatibility
I recommend you to use and icon from: https://fontawesome.com/v5.15/icons?d=gallery&p=2

As #A Haworth pointed out: it might be ralated to some css rule in your global css.
Browser specific default styles
Since your icon already contains a hard coded fill attribute, my suspicion is your icon is colored white due to a safari default button style.
You could try to disable default button styling by applying an appearance: none rule.
button {
font-size: 2em;
display: block;
width: 100%;
}
button svg {
display: inline-block;
height: 1em;
}
.btn-default {
appearance: none;
background: #fff;
border: 1px solid #000;
}
.btn-default-use {
color: #666;
}
button svg {
display: inline-block;
width: 1em;
}
.svgAssetHiddden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<p>button</p>
<button type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button appearance none</p>
<button class="btn-default" type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button use</p>
<button class="btn-default btn-default-use" type="submit" aria-label="Start Searching">
<svg viewBox="0 0 1024 1024">
<use href="#searchIcon" />
</svg>
</button>
<svg class="svgAssetHiddden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-hidden="true">
<symbol id="searchIcon" fill="currentColor">
<path d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z" />
</symbol>
</svg>
Eventually, it might also be related to a Dark mode setting overriding your original fill to ensure a sufficient contrast.

Use SVG image on website with rounded corners - showing white for rounded area

I am creating a very simple React page with an SVG image on it. That SVG image has round corners. I can open it up in GIMP and see the rounded corners shown.
Now I add it to my website like this:
import cardBackR from '../img/cards/2B.svg'
...
<img className='card' src={cardBackR} />
And then when I view the page with the card over a background image, the rounded corners show as white:
Here is the full SVG code of that image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
<defs>
<pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M3 0L6 3L3 6L0 3Z" fill="red"></path>
</pattern>
</defs>
<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"></rect>
<rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect>
</svg>
I've tested this in both Firefox and Chrome. Any ideas what is causing the rounded corners to fail?

SVG in an IMG src should work fine, provided you escape the # with %23
<style>
body{
background:green;
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
class='card' face='2B' height='3.5in' preserveAspectRatio='none' viewBox='-120 -168 240 336' width='2.5in'>
<defs><pattern id='B2' width='6' height='6' patternUnits='userSpaceOnUse'>
<path d='M3 0L6 3L3 6L0 3Z' fill='red'></path></pattern></defs>
<rect width='239' height='335' x='-119.5' y='-167.5' rx='12' ry='12' fill='white' stroke='black'></rect>
<rect fill='url(%23B2)' width='216' height='312' x='-108' y='-156' rx='12' ry='12'></rect>
</svg>">

Figured out the issue. I unfortunately picked a poor name for my class. That is a special class in Bootstrap and that was adding the following CSS:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}

Animating SVG with CSS and an inner <g> tag is its axis

I've got a small problem that I'm sure is just a simple fix, but I just haven't been able to fix it with how I usually do things.
I've created an SVG logo in Sketch, and exported it and just wanted to make a simple loading animation, just rotating circles, one rotating clockwise and one rotating counter-clockwise. This should have been pretty simple, but when I got to the inner circle, it's rotating around a different axis. I put transform-origin: center on it, and it did nothing. I did transform-origin: fill-box and it got it rotating (on its inner axis) in the top left corner, so still not what I wanted. And I've taken the inline transform off, to no avail. The HTML code is here:
<div class='loading-screen'>
<svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Group 11 Copy 9</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-11-Copy-9">
<g id="Group-75-Copy" fill="#425563">
<path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
<path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
<path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
<path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
<path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
<path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
<path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
<path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
<path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
<path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
<path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
<path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
<path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
<path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
<path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
<path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
<path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
<path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
<path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
<path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
<path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
<path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
<path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
<path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
</g>
<g id="Group" transform="translate(12.068571, 12.068571)" fill="#FF6900">
<path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
<path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
<path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
<path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
<path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
<path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
<path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
<path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
<path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
<path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
<path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
<path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
</g>
</g>
</g>
</svg>
</div>
And the SCSS code is here:
* {
margin: 0;
padding: 0;
}
.loading-screen {
height: 100vh;
width: 100vw;
background-color: #f3f4f5;
position: fixed;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
g#Group-75-Copy {
transform-origin: center;
animation: backwards-spin 3s infinite linear;
}
g#Group {
transform-origin: center;
transform-box: fill-box;
animation: spin 3s infinite linear;
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes backwards-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
And here's a link to a working codepen: https://codepen.io/adammcgurk/pen/oJmLxW
So the TL;DR question is:
How can I get the orange circle to be in the middle as opposed to in the top left corner of the SVG?

I would add some translation to the animation to rectify the position:
* {
margin: 0;
padding: 0;
}
.loading-screen {
height: 100vh;
width: 100vw;
background-color: #f3f4f5;
position: fixed;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 62px;
height: 62px;
}
g#Group-75-Copy {
transform-origin: center;
animation: backwards-spin 3s infinite linear;
}
g#Group {
transform-origin: center;
transform-box:fill-box;
animation: spin 3s infinite linear;
}
#keyframes spin {
0% {
transform:translate(35%,35%) rotate(0deg);
}
100% {
transform:translate(35%,35%) rotate(360deg);
}
}
#keyframes backwards-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class='loading-screen'>
<svg>
<g id="Page-1" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-11-Copy-9">
<g id="Group-75-Copy" fill="#425563">
<path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
<path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
<path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
<path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
<path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
<path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
<path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
<path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
<path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
<path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
<path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
<path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
<path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
<path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
<path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
<path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
<path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
<path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
<path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
<path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
<path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
<path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
<path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
<path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
</g>
<g id="Group" fill="#FF6900">
<path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
<path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
<path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
<path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
<path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
<path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
<path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
<path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
<path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
<path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
<path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
<path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
</g>
</g>
</g>
</svg>
</div>

Pure svg and smil
Option using stroke-dasharray
We divide one circle into 12 parts, the second circle into 24 parts.
Set the circles to a wide stroke.
Use the animation of the rotation of circles in different directions
.container {
width:50%;
height:50%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" >
<circle fill="none" cx="200" cy="200" r="50" stroke="#425563" stroke-width="14" stroke-dasharray="4 9.08" >
<animateTransform
attributeName="transform"
type="rotate"
dur="2s"
values="0 200 200; -360 200 200"
repeatCount="indefinite" />
</circle>
<circle fill="none" cx="200" cy="200" r="25" stroke="#FF6900" stroke-width="12" stroke-dasharray="4 9.08" >
<animateTransform
attributeName="transform"
type="rotate"
dur="2s"
values="0 200 200; 360 200 200"
repeatCount="indefinite" />
</circle>
</svg>
</div>

On the same page, an inline SVG scales but an SVG embedded as an <img> doesn't - why not? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I have an SVG which I would like to use frequently across a new site.
Consequently, rather than writing the SVG inline on many pages, it seems to make sense to include the SVG on each page as a cacheable <img>, which, after the first download, will be retrievable from the browser cache.
The SVG I am calling via <img> is identical to what I would otherwise write inline - but where the inline SVG scales respective to browser width, the SVG called by <img> does not.
What do I need to do, to ensure the SVG called by <img> scales up and down in exactly the same way as if it were included inline?
Example:
.handsoffhri-campaign-logo {
width: 80.5vw;
height: 12vw;
background-color: rgba(0,0,0,0.4);
}
pre, p pre {
display: inline;
}
<p>Expand this window to <em>Full Page</em> and then narrow and widen the browser viewport to see how the two SVGs behave differently (though they are identical). How can I get the SVG called by <b><img></b> to scale up and down like the inline SVG?</p>
<h2>SVG called by <pre><img></pre></h2>
<img class="handsoffhri-campaign-logo" src="http://handsoffnhs.org/.assets/theme/elements/handsoffhri-logo.svg" alt="" />
<h2>SVG Inline</h2>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 805 120">
<defs>
<filter id="shadow" x="0" y="0">
<feOffset result="offOut" dx="2" dy="2" />
<feColorMatrix result="matrixOut" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" stdDeviation="2" />
<feBlend in="SourceGraphic" mode="normal" />
</filter>
<style type="text/css"><![CDATA[
svg {
font-family: arial;
font-size: 84px;
font-weight: 900;
text-transform: uppercase;
background-color: rgba(0,0,0,0.4);
}
text, rect, path {
fill: rgb(0, 75, 165);
stroke: rgb(30, 40, 90);
stroke-width: 1;
}
rect + text {
fill: rgb(255, 255, 255);
}
a:nth-of-type(2) rect {
stroke: none;
fill: rgb(255, 255, 255);
}
path {
transform: translate(414px, 12px);
}
]]></style>
</defs>
<a xlink:href="http://handsoffhri.org/"><text x="0" y="70" filter="url(#shadow)">#Hands</text><rect x="396" y="0" width="200" height="80" /><text x="406" y="70">Off</text><text x="603" y="70" filter="url(#shadow)">HRI</text></a>
<a xlink:href="http://handsoffnhs.org/">
<rect x="426" y="20" width="30" height="40" />
<path d="M 17.923077,46.076923 C 14.343392,42.497239 14.27418,40.818155 17.53034,36.54911 19.670795,33.742828 19.964561,32.558959 19.43687,28.865832 19.093774,26.464624 18.091959,22.925 17.210613,21 15.473393,17.205632 14.946739,8.8090066 16.395225,8 c 0.492374,-0.275 1.522812,1.75 2.289861,4.5 0.76705,2.75 1.785893,5.9 2.264097,7 0.478204,1.1 1.121144,2.7875 1.428755,3.75 0.388325,1.215052 1.601353,1.75 3.968232,1.75 1.874918,0 3.94672,0.647984 4.604006,1.439966 0.657286,0.791981 2.129739,1.579481 3.272118,1.75 3.300549,0.492661 6.095959,4.949339 4.942528,7.879795 C 38.638723,37.406393 37.617787,40.525 36.896075,43 c -1.470078,5.04141 -2.354638,5.96259 -5.746769,5.984687 -2.184572,0.01423 -2.312807,-0.285031 -1.814586,-4.234687 0.29486,-2.3375 0.828492,-5.625597 1.18585,-7.306882 0.910327,-4.282879 -1.674633,-6.518656 -4.539328,-3.926143 -2.445773,2.213395 -2.522575,5.352525 -0.231242,9.451617 1.687087,3.018122 1.680216,3.182812 -0.19113,4.581039 -2.817812,2.105407 -4.353952,1.809133 -7.635793,-1.472708 z M 5.9073963,33.25 2.6076082,29.5 5.0157824,29.152671 C 7.7278899,28.761505 11,32.019342 11,35.110784 11,37.937782 9.573836,37.416676 5.9073963,33.25 Z M 41.007272,27 c 0.549073,-1.375 1.491079,-3.7375 2.093346,-5.25 0.602268,-1.5125 1.726011,-2.75 2.497207,-2.75 2.311553,0 1.576924,2.264983 -2.108223,6.5 -2.678238,3.077864 -3.250499,3.423665 -2.48233,1.5 z m -8.000683,-3.75 c 0.0036,-0.9625 0.900659,-3.1 1.993411,-4.75 1.092752,-1.65 1.989787,-4.4074 1.993411,-6.127555 0.0073,-3.4695992 2.322706,-6.2880071 3.543292,-4.3130587 0.626634,1.0139159 -1.08136,7.8982867 -3.644702,14.6906137 -1.001533,2.653854 -3.894924,3.026194 -3.885412,0.5 z m -6.936221,-3.118517 c -0.55,-1.027684 -0.689818,-2.1787 -0.310706,-2.557811 0.379112,-0.379112 0.559103,-3.58828 0.39998,-7.131483 C 25.922072,5.152178 26.148965,4 27.42827,4 c 1.304453,0 1.537588,1.4643706 1.432844,9 -0.123753,8.903267 -0.849702,10.758358 -2.790746,7.131483 z" id="path3690" />
</a>
</svg>

SVG layout properties

I am trying to place separate SVG code at the bottom inline but am unsure as to how as this differs from usual HTML layout properties.
I have wrapped each SVG in a common div as shown:
.svg-container {
width: 60px;
display: inline-block;
}
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051
90.197-36.192 10.033z"></path><path fill="#F16529" d="M64
118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB"
d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969
2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-
11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034
1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-
5.143v5.633h-
5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-
5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-
5.911h5.865v16.822h-
5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-
16.822zM86.591
1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path
fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34
3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962
44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
</svg>
</div>
<div class="svg-container">
<svg viewBox="0 0 128 128">
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-
15.672-
14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-
3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093
4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-
4.045-
3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-
8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54
6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-
6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-
3.106-
2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583
3.249
3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-
1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-
10.735.001-21.468.001-32.237z"></path>
</svg>
</div>
If I adjust the coordinates in the viewbox to correlate with viewBox = <min-x> <min-y> <width> <height> such as <svg viewBox="0 -250 128 128"> the position doesn't change.
Any help with someone with svg experience would be greatly appreciated!

Apparently, you tried to delete the text "HTML" above the Html5 logo
in the SVG file and erased the extra part of the path. I took the
original HTML5 logo svg file and added the css markup.
The "JS" logo was not in the center of the viewport. For the
location of JS characters in the center of the viewport added:
width="100" height="100" viewBox="12 25 128 128"
The first two attributes of the viewBox shift the JS characters to the left and up to 12px and 25px respectively.
If I correctly understood your question, it should look like this:
.svg-container {
position:absolute;
top:2%;
left:1%;
width: 120px;
display: inline-block;
}
.svg-container2 {
position:absolute;
top:16%;
left:20%;
width: 60px;
display: inline-block;
}
.wrap {
width:1000px;
height:120px;
position:relative;
padding:0.5em;
}
<div class="wrap">
<div class="svg-container">
<svg viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>
</div>
<div class="svg-container2">
<svg width="100" height="100" viewBox="12 25 128 128" style="border:1px solid black">
<rect x="12" y="25" width="128" height="128" fill="#F0DB4F" />
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" stroke="none" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z">
</path>
</svg>
</div>
</div>

It sounds like there are two questions here, I'll try to answer both; my understanding is that you would like to:
Have two inline columns, each with an SVG in them that scales to the width of their respective column on resize.
Move the paths of the SVGs within the view box.
Regarding 1, to do this, you can set viewBox = "0 0 widthOfSVG heightOfSVG". Then just use CSS to set the columns adjacent to each other. Importantly, this will not work in many versions of IE – the simplest work around there is often to use javascript to resize your SVGs by binding a function to the window resize event.
For 2, unfortunately, I believe the paths need to be recomputed / rewritten to the correct location on the SVG. While this could be done with JavaScript, it's liable to become fairly involved quickly.