SVG is Invalid and Won't Display on Web

SVG is Invalid and Won't Display on Web - html

So I made a bunch of edits to an SVG file and now I can't open in in AI and it will not display on web. I'm guessing it is due to the fact that I have HTML elements inside it like the tags but I am not sure how to get around that without breaking the rest of the code.
<div>
<div id="banner">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
<path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</g>
<defs>
<style type="text/css">
.st0 {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-miterlimit: 5;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
</style>
</defs>
</svg>
</div>
</div>
</div>

Related

Text on a Circle Path around an SVG Image

I'm attempting to have animated text moving on a circular path around an image. I have the circular text, but I can't get the image on the inside.
Here is the code I'm using:
<div id="container">
<div id="circle">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="200px"
height="200px"
viewBox="0 0 400 400"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>
Here is the full code on JSFiddle I created.
The svg I'm trying to place in the middle is this: https://svgshare.com/i/Z4d.svg
Any help would be appreciated.

You could achieve this with the image tag:
<image
x="165"
y="150"
width="88"
height="100"
xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>
or (like in your linked svg)
<image
...
xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>
To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:
#circle svg text {
transform-origin: 50% 50%;
animation-name: rotate;
...
}
Working example: (i removed the circle because it wasn't used)
Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.
#container {
margin: 0%;
margin-top: 0px;
margin-bottom: 0px;
}
#circle {
position: relative;
width: 500px;
padding-bottom: 0%;
overflow: visible;
z-index: 2;
}
#circle text {
margin: 0 calc(.14em * -1) 0 0;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: .83em;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: black;
background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
background-size: 100% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
letter-spacing: .32em;
}
#circle svg {
position: absolute;
left: 140px;
top: -110px;
width: 100%;
height: 430px;
}
#circle svg text {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#media screen and ( max-width: 979px) {
#circle svg {
left: 0px !important;
top: -70px !important;
height: 360px;
}
}
#media screen and ( max-width: 480px) {
#circle svg {
left: -140px !important;
top: 140px !important;
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<g>
<use xlink:href="#circlePath" fill="none"/>
<rect
x="160"
y="160"
width="80"
height="80"
fill="#FCDB8D"
/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>

How do I move an SVG group with CSS keyframes?

I want to move SVG elements across their container using CSS keyframes.
If I had just a <circle />, I could simply use the cx / cy properties in the keyframe definition. But what if I had an arbitrary group (<g />)? A group doesn't have cx / cy, and it seems that I have to define a unit (like px) if I wanted to use CSS' transform: translate(x,y).
MWE (how do I animate the bar group?):
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
#keyframes moveFoo {
from {
cx: 10;
cy: 10;
}
to {
cx: 90;
cy: 90;
}
}
/* how to define this? */
#keyframes moveBar { }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g class="bar" transform="translate(90 10)">
<circle r="5" fill="blue" />
<text
y="1"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
</svg>

Use animateTransform to do this:
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g id="bar" transform="translate(90 10)">
<circle r="5" fill="blue" />
<text
y="1"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
<animateTransform xlink:href="#bar"
attributeName="transform"
type="translate"
from="90,10" to="90,90"
dur="2" repeatCount="indefinite"/>
</svg>

it seems that I have to define a unit (like px) if I wanted to use
CSS' transform: translate(x,y).
Yes, it's true, you do.
But that won't be an issue, if you have already declared a viewbox attribute in the <svg> element.
If you have declared a viewbox, 1px will represent 1 viewbox unit.
Working Example:
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
fill: red;
transform: translate(10px, 10px);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
transform: translate(90px, 10px);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
.bar circle {
fill: blue;
}
.bar text {
fill: white;
font-family: monospace;
font-size: 5px;
text-anchor: middle;
}
#keyframes moveFoo {
0% {transform: translate(10px, 10px);}
50% {transform: translate(90px, 90px);}
100% {transform: translate(10px, 10px);}
}
#keyframes moveBar {
0% {transform: translate(90px, 10px);}
50% {transform: translate(10px, 90px);}
100% {transform: translate(90px, 10px);}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" />
<g class="bar">
<circle r="5" />
<text y="1">AB</text>
</g>
</svg>

If you need to use #keyframes instead of animating the cx and cy attributes you have to animate from transform:translate(0,0) to transform:translate(90px,90px) (for example.)
Otherwise Temani Afif's answer is perfectly valid.
`
svg {
padding: 5px;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.foo {
transform:translate(0,0);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveFoo;
}
.bar {
transform:translate(0,0);
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: moveBar;
}
#keyframes moveFoo {
from {
transform:translate(0,0)
}
to {
transform:translate(90px,90px)
}
}
/* how to define this? */
#keyframes moveBar {
from {
transform:translate(0,0)
}
to {
transform:translate(90px,90px)
}
}
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="foo" r="5" fill="red" />
<g class="bar" >
<circle r="5" fill="blue" cx="10" cy="10" />
<text
x="10"
y="11"
text-anchor="middle"
fill="white"
font-family="monospace"
font-size="5">
AB
</text>
</g>
</svg>

Embedding CSS into SVG to create pulsating circle

Is there a way to embed this Codepen CSS into the SVG to create a standalone SVG file (i.e. icon)? Basically convert the entire Codepen code into 1 single .svg file
This is the link to the Codepen
<div class="pulse-container">
<div class="pulse-box">
<svg class="pulse-svg" width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle class="circle first-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle second-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle third-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle" fill="#FF6347" cx="25" cy="25" r="25"> </circle>
</svg>
</div>
</div>

According to the doc, you can use the <style> element in a <svg>.
On the other hand, note that your Codepen is in SCSS and not in CSS.
Here is an example where I quickly converted your code into CSS:
<div class="pulse-container">
<div class="pulse-box">
<svg class="pulse-svg" width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
/* <![CDATA[ */
.pulse-box {
float: left;
width: 50%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
/* pulse in SVG */
svg.pulse-svg {
overflow: visible;
}
svg.pulse-svg .first-circle {
fill: #f00;
transform: scale(0.5);
transform-origin: center center;
animation: pulse-me 3s linear infinite;
}
svg.pulse-svg .second-circle {
fill: #f00;
transform: scale(0.5);
transform-origin: center center;
animation: pulse-me 3s linear infinite;
animation-delay: 1s;
}
svg.pulse-svg .third-circle {
fill: #f00;
transform: scale(0.5);
transform-origin: center center;
animation: pulse-me 3s linear infinite;
animation-delay: 2s;
}
/* pulse in CSS */
.pulse-css {
width: 30px;
height: 30px;
border-radius: 15px;
background: tomato;
position: relative;
}
.pulse-css:before,
.pulse-css:after {
content: "";
width: 30px;
height: 30px;
border-radius: 15px;
background-color: tomato;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform: scale(0.5);
transform-origin: center center;
animation: pulse-me 3s linear infinite;
}
.pulse-css:after {
animation-delay: 2s;
}
#keyframes pulse-me {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 0.1;
}
70% {
opacity: 0.09;
}
100% {
transform: scale(5);
opacity: 0;
}
}
/* ]]> */
</style>
<circle class="circle first-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle second-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle third-circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
<circle class="circle" fill="#FF6347" cx="25" cy="25" r="25"></circle>
</svg>
</div>
</div>

Play Button Alignment Issues in HTML/CSS

I have a header on the left side and want to add a button inline with the header on the right side.
When I add "position:relative: and top:400px, it moves the button perfectly. When i add "left:200px" it moves the button perfectly again, but when i hover it moves the button back to center of page.
How do i stop it from doing this?
i've created IMG images to show specifically how it moves:
https://imgur.com/a/SMLCbmN
**note when left:200px; is not added, the button doesn't move to center of page. i've tried removing the "text-algin: center;" along with a lot of other ideas..but am stuck.
Here is the code: https://codepen.io/TheGreatEscape/pen/ebYgGO
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
position: relative;
top: 400px;
left: 200px;
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
<div class='container'>
<a href='#' class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>

see this demo if it helps
/*===== PLAY BUTTON ===*/
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
/*position: relative;
top:400px;
left:200px;*/
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
h2.title {
font-size: 40px;
margin: 60px 0 0;
display: inline-block;
float: left;
}
<div class='container'>
<h2 class="title">some text</h2>
<a href='#'class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>
Update
you need
a.playBut, a.playBut:hover, a.playBut:active, a.playBut:focus {
left: 800px;
right: auto;
}
see demo
normal
on hover

Add position: absolute to your .playBut. top and left works only on absolute position.
See example here

SVG animation issue with <style> tag

I am trying to add the CSS code inside the HTML but I am having trouble getting the SVG animation to work. What am I doing wrong here? My guest is that I am referencing <style> wrongly but after a couple of tries I can't make it work.
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<svg class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
</svg>
</svg>
CodePen
Thank you in advance.

Your animation works. You messed up stroke color definition. hsl(210, 70%, 75%);
and circle elements opening tag is missing closing bracket >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" > </circle>
html, body {
height: 100%;
background-color: #000000;
}
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
transform-origin:center center;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70%, 75%);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<g class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</g>
</svg>

you need to close the html tag for circle
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
should be
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

SVG is Invalid and Won't Display on Web - html

Related

Text on a Circle Path around an SVG Image

How do I move an SVG group with CSS keyframes?

Embedding CSS into SVG to create pulsating circle

Play Button Alignment Issues in HTML/CSS

SVG animation issue with <style> tag

Categories

Resources