SVG Datei

ich würde dir das Plugin svg Support empfehlen wollen, weil es zusätzlich die Möglichkeit bietet eventuell die svgs nicht als img sondern als inline svg zu setzen.
Trotzdem benötigt ein svg eine Größenangabe zB width – da es von der Media Library als 0 x 0 image geführt wird.

Das Plugin svg Support macht schon vieles automatisch richtig.
Es fügt die Möglichkeit ein überhaupt svgs hochladen zu können. Ausserdem sieht man in der Mediathek auch schon Vorschaubilder der svgs. Ist nämlich nur durch Zulassen des Mime Typs nicht selbstverständlich.
Das Plugin kann – so es denn auf den advanced Modus gestellt wurde – dafür sorgen, dass alle Bilder oder nur Bilder mit einer bestimmten Klasse inline eingestetzt werden. Die Standard Klasse des Plugins ist da: style-svg
Trifft das Plugin nun auf ein : <img src="abc.svg" /> so wird das img durch das svg ersetzt.
Wie bekomme ich nun diese Klasse an mein Logo ?
zB: über die child-theme functions.php:

// damit svg support am Logo greifen kann - hinzufügen der trigger Klasse
function custom_logo_attributes(){
?>
<script>
(function($){
	$('.logo img').addClass('style-svg').attr({ title:"Meine Webseite", alt:"Logo" });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_attributes');

das das logo img nun die trigger Klasse besitzt, wird das svg nun anstelle inline eingesetzt.

Wenn es denn nun als inline svg vorhanden ist, dann sollte man die Display Option für das logo a ändern. Nur so macht dann das svg auch ein shrinken mit.:

.logo a {
    display: flex !important;
}

eventuell hier dann für den responsiven Fall wieder anpassen.

Ersetze doch mal bitte genau dieses Bild . – dann sehen wir weiter

der Firefox zeigt die sofort an. Nur Chrome und Safari brauchen eine Größenangabe.
ZB:

svg.avia_image {
    width: 100px;
}

Enfold hat dieses Input Feld auf : Enfold (Child) – Allgemeines Styling : Quick CSS

dort kann man den Code eintragen.

PS : großer Vorteil inline svg – man kommt an viele Sachen via css dran um zB – füllfarben zu beeinflussen

gib mal zB ein:

svg:hover .cls-1 {
    fill: aqua;
-webkit-filter: drop-shadow(1px 1px 3px #333);
    filter: drop-shadow(1px 1px 3px #333);
    transition: all 0.5s ease;
}

und schau was beim hovern mit deinem Schwimmer passiert.

du hast jetzt das wichtigste schon erreicht. Leider sind in deinen svgs die Klassen oft gleich, deshalb verändert sich auch die Füllung für cls-1 in beiden svgs (Schwimmer und Gewichtheber) – du musst daher einen Selector finden der nur für das eine svg zutrifft.

damit kommst du wieder zurück auf deine ursprüngliche Füllung.
Das SVG Support Plugin nummeriert die ersetzten imgs auf der seite durch.
Daher :

#svg-replaced-0 .cls-1 {
    fill: #3d7cc9 !important;
}

leider legt zB auch Illustrator stets mit st die klassen an ( st0, st1, etc) ich bearbeite diese Klassen immer nach, um sowas zu vermeiden.

ich persönlich hätte jedem svg eine Eindeutige und Einmalige ID gegeben, bevor ich es uploade.
Dazu öffnet man das svg mit einem guten Texteditor ( sublime text für Mac – notepad++ für Windows zB)

Dein Kurse svg sollte dann so in etwa oben anfangen:

<?xml version="1.0" encoding="utf-8"?>
<svg id="Kurse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"  class="">
<defs>
<style>
.cls-1{fill:#6bc4e8;}
.cls-2{fill:#fff;}
.cls-3{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.2px;}
</style>
</defs>
…

Das ist denke ich besser als jetzt via page-id-x ( findet sich immer als Klasse bei body (#top)
dann kann man bequem über diese ID definieren und es kommt dann auch nicht dazu, das es auf anderen Seiten umgefärbt wird.