Remplir une image avec une couleur

mowh
Les bases HTML/CSS

Bonjour,

Je suis en train de dévellopper un site et je veux incorporer mon logo (svg) dans le header.
Voilà en gros mon code :

<header>
    <nav id="navbar">
        <ul>
            <li><a href="#">accueil</a></li>
            <li><a href="#">à propos</a></li>
            <li><a href="#"><img src="img/logo.svg"></a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</header>

Tout va bien, mais je décide de mettre le tout en blanc sur jaune avec le css. Evidemment le logo étant dans une balise <img>, il reste noir. Je n'ai aucune connaissance en xml mais apparemment on peut utiliser " fill: #fff; " pour remplir un svg.
Sauriez-vous m'aider ?
Merci

PS. J'ai pensé à convertir le logo en icon font mais icomoon ne propose un lien permanent qu'aux membres premium, si vous avez une solution dans cette directive là, je suis ouvert :)

5 réponses

caoua
Réponse acceptée

Salut,

tu trouveras de bonnes infos sur l'utilisation du svg dans le html ici

Sinon, si ton logo est uniquement en 2 couleurs, celle du dessin qui ne change pas, et celle du fond qui est amené a changer, tu as la solution d'utiliser le format png transparent. Ainsi, ce sera la couleur de fond de la balise img qui contiendra ton logo sur fond transparent que tu pourras faire varier.

Lartak
Réponse acceptée

Bonjour.
Tu trouveras les réponses à tes questions ici : Tutoriel Vidéos HTML/CSS » Utiliser les SVG.

mowh
Auteur

Merci pour vos réponses, j'ai tout simplement pris le code de mon svg, je pensait que c'etait trop compliqué mais ça allait ^^'

Et cacoua, c'est la couleur du logo que je veux changer, pas du fond :)

caoua

Tu sais, tu n'as qu'à, dans le cas d'utilisation d'un fichier png transparent, inverser la zone du logo et la zone de transparence.
Tu passes la zone de transparence en couleur, et la zone de ton logo en transparent, et ainsi tu pourras via la couleur de fond de la balise <img>, changer la couleur du logo et non celle du fond.
Mais bon, l'utilisation du svg est plus judicieuse. Je partageais la solution du png transparent au cas où tu ne souhaitais pas te prendre la tête avec le svg.

mowh
Auteur

Aah ! Pas bête ! Je n'y avais pas pensé, ça peut toujours servir, merci :)