Controllare svg con css

[Luke70]

Grazie mille ad entrambi!

Guide preziosissime.

Ho scoperto che ho fatta un'ingenuità: non si possono modificare gli svg con i css se le inserisci nell'html con un tag <img> o, come ho fatto io, inserendoli come background di un elemento con i css.

Adesso li sto inserendo come object e dovrei farcela anche grazie alle guide che mi avete indicato

[Pandax]

Grazie mille ad entrambi!

Guide preziosissime.

Ho scoperto che ho fatta un'ingenuità: non si possono modificare gli svg con i css se le inserisci nell'html con un tag <img> o, come ho fatto io, inserendoli come background di un elemento con i css.

Adesso li sto inserendo come object e dovrei farcela anche grazie alle guide che mi avete indicato

ci sto provando anch'io ma non ci sto riuscendo nonostante le guide lette...

la domanda sorge spontanea... è possibile modificare un'immagine svg... con un css esterno?

cioè...

se lo inserisco come object

<object type="image/svg+xml" id="logo" data="/frontend/images/icona_test.svg">
                                <div>SVG logo</div>
</object>

poi in un file css esterno posso mettere uno stile css che mi modifica il colore dell'svg?
dalle mie prove NO

.st0{clip-path:url(#SVGID_2_);fill:#ff0000;}

mi riesce solo se lo inserisco interamente come svg (codice) nell'html

<svg version="1.1" id="Livello_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="56.2" height="56.2" viewBox="0 0 56.2 56.2" xml:space="preserve" enable-background="new 0 0 56.194 56.191">
       
        <g id="neon"><circle class="st1" cx="28.1" cy="28.1" r="27.8"/>
            <path class="st0" d="M15.7 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S21.2 45.5 15.7 45.5M15.7 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S21.7 24.5 15.7 24.5M15.7 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S20.5 44.2 15.7 44.2M15.7 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S20.8 26.1 15.7 26.1M16.6 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM19.4 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM21.7 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM23.5 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM7.4 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM14.8 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM12.5 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM9.7 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM16.3 30.4c0 0.4-0.3 0.6-0.6 0.6s-0.6-0.3-0.6-0.6c0-0.3 0.3-0.6 0.6-0.6S16.3 30.1 16.3 30.4M40.5 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S46 45.5 40.5 45.5M40.5 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S46.5 24.5 40.5 24.5M40.5 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8 8.8 3.9 8.8 8.8S45.3 44.2 40.5 44.2M40.5 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S45.6 26.1 40.5 26.1M41.4 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM44.2 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM46.5 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM48.3 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM32.2 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM39.6 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM37.3 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM34.5 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM41.1 30.4c0 0.4-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3 0.3-0.6 0.6-0.6C40.8 29.8 41.1 30.1 41.1 30.4M28.1 24.8c-5.6 0-10.1-4.5-10.1-10.1 0-5.6 4.5-10.1 10.1-10.1 5.6 0 10.1 4.5 10.1 10.1C38.2 20.3 33.6 24.8 28.1 24.8M28.1 3.8c-6 0-10.9 4.9-10.9 10.9 0 6 4.9 10.9 10.9 10.9 6 0 10.9-4.9 10.9-10.9C39 8.7 34.1 3.8 28.1 3.8M28.1 23.5c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S32.9 23.5 28.1 23.5M28.1 5.4c-5.1 0-9.3 4.2-9.3 9.3 0 5.1 4.2 9.3 9.3 9.3 5.1 0 9.3-4.2 9.3-9.3C37.4 9.6 33.2 5.4 28.1 5.4M29 23.4c0.2 0 0.4 0 0.5-0.1V6.1c-0.2 0-0.4-0.1-0.5-0.1V23.4zM31.8 6.8c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V6.8zM34.1 8.3c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V8.3zM35.9 18.7c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V18.7zM19.8 17.5c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V17.5zM27.2 6c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V6zM24.9 6.5c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V6.5zM22.1 21.1c0.2 0.2 0.3 0.3 0.5 0.5V7.9c-0.2 0.1-0.4 0.3-0.5 0.5V21.1zM28.7 9.7c0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6s0.3-0.6 0.6-0.6C28.4 9 28.7 9.3 28.7 9.7"/></g></svg>

La mia necessità ed intenzione sarebbe quella di:
- avere una pagina html
- avere un css esterno della pagina
- avere dei file svg, inseriti/inclusi nella pagina html...
- usare delle classi scritte nel css esterno per modificare colore, dimensioni o altro del file svg incluso sulla pagina html

insomma non andare ad inserire il codice svg completo nella pagina html ma solo il link al file svg,
così che se domani dovessi cambiarlo, lo cambio una volta sola e non devo andare in cerca tra le pagine html del codice di quell'svg..che oltretutto risulterebbe molto poco distinguibile da un'altro svg...

non so se sia chiaro...

mi basterebbe vedere un esempio semplice... così se sbaglio, so dove...

[Pandax]

Se non mi sono spiegato e non avete capito, chiedete pure...

attualmente come già detto riesco a cambiare il colore dell'immagine svg "solo" se la inserisco come codice nell'html.. quindi con tag svg..ecc..

io vorrei sapere se è possibile e nel caso come si fa... a cambiare colore.. (insomma ad interagire) inserendo l'immagine svg come object o altro.. insomma solo come riferimento all'immagine reale (come fosse una normale immagine jpg insomma)...

[Pandax]

Nessuno che usi PHP e che abbia usato immagini SVG a cui ha cambiato colore dinamicamente tramite CSS?

come le inserite..?

Io in locale ero riuscito, inserendo gli SVG con un include... e poi tramite css riuscivo a modificare il colore...
ma online mi va in errore String e non so come mai...

conoscete (ed avete usato) altri modi per inserire e poi interagire con gli svg per un cambio colore?