У вас там такая, извините, "каша", что сам чёрт ногу сломит. На "codepen" одно, на сайте другое.
Попробую объяснить на пальцах. Делаем три файла. Специально для ваших условий я кладу их по тем же путями и прописываю относительные пути:
/404/error.html
/css/error.css
/img/demo.svg
Поехали 404/error.html
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo SVG</title>
<link rel="stylesheet" href="../css/error.css">
</head>
<body>
<!-- для стилизации такого способа внеднения требуется идентификатор или класс, пусть будет id="myDotUse" -->
<svg>
<use id="myDotUse" href="../img/demo.svg#myDot"></use>
</svg>
<!--
в файле SVG потребуется первая! строка со ссылкой на внешнюю таблицу стилей
и <use> находится прямо внутри SVG
-->
<object type="image/svg+xml" data="../img/demo.svg#myDot">
<!--img на замену -->
</object>
</body>
</html>
css/error.css
#myDot {
animation: colorchange 3s infinite;
}
#myDotUse {
animation: colorchange 3s infinite;
}
@keyframes colorchange {
0% {
fill: #1bacff;
}
50% {
fill: black;
}
100% {
fill: #1bacff;
}
}
img/demo.svg
<?xml-stylesheet type="text/css" href="../css/error.css"?>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
</svg>
Попробуйте сами потыкать в код, поудалять и всякое такое. Думаю разберётесь где именно вы намудрили в своём.