3

Quiero manipular imágenes svg que tengo insertadas en mi página web (típicos iconos de redes sociales) para ponerle hover. El caso, es que haciéndolo desde CSS como es habitual, no funciona. ¿Cómo se pueden manipular imágenes svg desde CSS? ¿Se puede manipular desde CSS, o hay que utilizar algún editor de imágenes adicional? Muchas gracias.

El código es éste:

<div class="social">                     
<li>
<a href="index.html" class="socialancla">
<img src="../img/instagram.svg" class="imginstagram"alt="Instagram" title="Instagram">
</a>
</li>
<li>
<a href="index.html" class="socialancla">
<img src="../img/linkedin.svg" class="imglinkedin"alt="Linkedin" title="Linkedin">
</a>
</li>          
</div>

Y lo que quiero es poder meterle un hover a dichas svg para cuando pase el ratón encima que cambien de color.

5
  • Hola @Segio, Puedes mejorar la pregunta agregando algo de código, a la vez, que debes especificar qué es lo tratas de hacer. Ahora bien, si puedes manipular SVG con CSS. Si lo que deseas es manipular color de relleno en SVG debes utilizar la propiedad fill en lugar de background o stroke en lugar de border. Esto es solo un ejemplo. Los colores en el elemento a manipular no deben estar definidos. Commented el 25 jul. 2020 a las 12:48
  • La pregunta es un poco vaga porque realmente no sé cómo trabajarlo. ¿La propiedad fill se usa desde el propio CSS? ¿Cómo selecciono la imagen SVG y trabajo con dicha propiedad? ¿Y para un hover, cómo se haría? Gracias. Commented el 25 jul. 2020 a las 16:46
  • @SergioGordillo Sí puedes utilizar fill en CSS. Pero si no funciona podría ser que los íconos que tienes ya tienen un fill. Además no es muy claro como utilizas el SVG. Son elementos SVG inline o son imágenes que utilizan un archivo svg como valor del src.? En este último caso no podrás cambiar el color con fill. Por favor edita tu pregunta. Sería interesante añadir algo de código para que entendamos tu problema.
    – enxaneta
    Commented el 26 jul. 2020 a las 10:09
  • El código es éste: <div class="social"> <li><a href="index.html" class="socialancla"><img src="../img/instagram.svg" class="imginstagram"alt="Instagram" title="Instagram"></a></li> <li><a href="index.html" class="socialancla"><img src="../img/linkedin.svg" class="imglinkedin"alt="Linkedin" title="Linkedin"></a></li> </div> Y lo que quiero es poder meterle un hover a dichas svg para cuando pase el ratón encima que cambien de color. Muchas gracias, un saludo. Commented el 27 jul. 2020 a las 15:40
  • @SergioGordillo ya que quieres utilizarlos como imágenes, los puedes manipular de la misma manera como manipularías una imagen. Por ejemplo podrías aplicar un filtro. Si como es habitual significa que quieres cambiar el fil tendrías que utilizar elementos svg inline
    – enxaneta
    Commented el 29 jul. 2020 a las 13:33

4 respuestas 4

2

Puedes modificar el color de una imagen aplicando:

img{
    filter: hue-rotate(Xdeg)
}

Cambie X por el ángulo equivalente a tu color. Si no sabes cuál es, testea desde el inspector.

1

Veo que estás insertando el archivo svg como una imagen, esto hace que sea imposible (Según mi experiencia) hacer cosas como cambiar el color con la propiedad css fill; para hacer esto, debe incrustar el SVG en línea (Para obtener el código del svg, puedes abrir el archivo con un editor de texto), aquí hay un ejemplo:

 svg{
  width:50vh;
  height:40vh;
  fill: salmon;
  transition-duration:1s;
}
svg:hover{
  fill: red;
  transition-duration:1s;
  cursor:pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG</title>
    </head>
<body>
    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
        <path d="M502.61 233.32L278.68 9.39c-12.52-12.52-32.83-12.52-45.36 0L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c12.52 12.53 32.83 12.53 45.36 0l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zm-100.98 12.56l-84.21 77.73c-5.12 4.73-13.43 1.1-13.43-5.88V264h-96v64c0 4.42-3.58 8-8 8h-32c-4.42 0-8-3.58-8-8v-80c0-17.67 14.33-32 32-32h112v-53.73c0-6.97 8.3-10.61 13.43-5.88l84.21 77.73c3.43 3.17 3.43 8.59 0 11.76z"></path>
    </svg>
</body>
</html>

0

Yo personalmente tengo una función que me genera los SVG desde el código directamente. Te la copio aquí:

<?php
function getSVG($nombre,$width) {
    switch ($nombre) {
        case "author":
            echo "
            <svg class='svgcss' style='width:".$width."px;' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g id='Outline'><path d='M422.917,296.542,350.953,287.5A7.933,7.933,0,0,1,344,279.6V262.359a94.5,94.5,0,0,0,31.77-64.506l1.7-5.89a31.987,31.987,0,0,0,16.278-58.575,100.889,100.889,0,0,0-1.519-46.336A92.837,92.837,0,0,0,364.775,42.2c-1.973-1.766-3.714-3.221-5.322-4.448A103.345,103.345,0,0,0,258.438,23.113L230.423,34.1c-29.418.937-43.947,28.1-45.291,54.985-.974,18.1,2.357,35.557,6.107,50.665a31.969,31.969,0,0,0,14.31,50.483c3.533,9.961,7.951,18.295,15.1,30.487A94.524,94.524,0,0,0,248,262.358V279.6a7.87,7.87,0,0,1-6.177,7.762c-.3.04-.557.089-.766.134l-.049,0c-2.075.26-22.06,2.777-32.35,4.081-9.051-18.33-18.567-36.014-28.342-52.641l-12.247-29.168a8,8,0,0,0-10.348-4.33l-5.766,2.307-13.063-87.916a8,8,0,0,0-3.885-5.735L64.654,73.088A8,8,0,0,0,52.9,77.941L32.27,155.365a8,8,0,0,0,1.339,6.872l53.75,71.368-5.453,2.183a8,8,0,0,0-4.4,10.524l12.157,28.954C98.977,310.1,108.91,341.5,120,371.2V464a32.036,32.036,0,0,0,32,32H272a8,8,0,0,0,7.923-9.1,119,119,0,0,0-3.285-14.909l19.337-6.146,90.047,28.651a31.952,31.952,0,0,0,9.7,1.507H440a32.036,32.036,0,0,0,32-32V352.08A56.006,56.006,0,0,0,422.917,296.542ZM456,407.16l-83.693-8.369,44.944-22.472L456,382.777Zm0-55.08v14.476l-38.685-6.447a8,8,0,0,0-4.893.736l-46.683,23.341L296,391.16l-46.984-4.7c-1.33-3.647-2.682-7.259-4-10.781-8.7-23.3-18.445-46.425-29.021-68.9,7.624-.964,17.271-2.18,22.831-2.879a69.454,69.454,0,0,0,116.9.32l65.221,8.2A39.993,39.993,0,0,1,456,352.08ZM264,279.6v-6.483A68.377,68.377,0,0,0,293.827,280h4.346A68.377,68.377,0,0,0,328,273.117V279.6a23.985,23.985,0,0,0,11.159,20.261A53.434,53.434,0,0,1,254.6,298.6,23.967,23.967,0,0,0,264,279.6ZM306.868,136H285.132a17.589,17.589,0,0,0-14.732-8H237.749A102.882,102.882,0,0,0,248,83.158V72h8.676c13.1,0,23.6,9.578,34.718,19.719C302.323,101.69,313.624,112,328,112h32c0,4.815,0,10.974,0,16.081-.528-.048-1.061-.081-1.6-.081H321.6A17.589,17.589,0,0,0,306.868,136ZM232,145.6a1.6,1.6,0,0,1,1.6-1.6h36.8a1.6,1.6,0,0,1,1.6,1.6v12.8a1.6,1.6,0,0,1-1.6,1.6H233.6a1.6,1.6,0,0,1-1.6-1.6Zm88,0a1.6,1.6,0,0,1,1.6-1.6h36.8a1.6,1.6,0,0,1,1.6,1.6v12.8a1.6,1.6,0,0,1-1.6,1.6H321.6a1.6,1.6,0,0,1-1.6-1.6ZM376,176V144a16,16,0,0,1,0,32ZM201.11,89.919c.919-18.377,9.56-39.839,30.89-39.839a7.985,7.985,0,0,0,2.922-.553L264.275,38.01a87.282,87.282,0,0,1,85.349,12.365l.088.069c1.282.976,2.718,2.179,4.387,3.672,19.98,17.918,29.128,46.3,24.348,73.987-.808-.062-1.622-.1-2.446-.1,0-10,0-24,0-24a8,8,0,0,0-8-8H328c-8.174,0-16.747-7.821-25.822-16.1C289.9,68.7,275.982,56,256.676,56H240a8,8,0,0,0-8,8V83.158A86.931,86.931,0,0,1,219.582,128H216a31.855,31.855,0,0,0-10.672,1.836C202.52,117.42,200.368,103.71,201.11,89.919ZM216,144v32a16,16,0,0,1,0-32Zm16,47.344V175.919c.528.048,38.4.081,38.4.081A17.621,17.621,0,0,0,288,158.4V152h16v6.4A17.621,17.621,0,0,0,321.6,176s37.872-.033,38.4-.081c0,0-.04,18.332-.119,19.776,0,.032,0,.065-.006.1a78.567,78.567,0,0,1-28.229,56.089A52.385,52.385,0,0,1,298.173,264h-4.346a52.385,52.385,0,0,1-33.473-12.119A78.589,78.589,0,0,1,232,191.344Zm-1.971,189.945q.633,1.688,1.274,3.4l-5.042-.5-46.683-23.341a8.008,8.008,0,0,0-4.893-.736l-5.012.835c-4.415-10.83-8.729-22.161-12.854-33.781l-15.078,5.354c3.784,10.658,7.726,21.086,11.76,31.122l-18.119,3.02c-10.377-27.677-19.729-56.872-28.515-89.043l62.817-25.142c9.366,16.246,18.473,33.459,27.121,51.262C209.023,328.883,220.2,354.972,230.029,381.289ZM162.6,238.071l-60.969,24.375L95.4,247.62l60.959-24.4ZM48.732,155.721l13.59-51.015,22.809,54.321a16.047,16.047,0,0,0-2.175,3.685,15.727,15.727,0,0,0,.008,12.246,16.313,16.313,0,0,0,21.037,8.7,15.974,15.974,0,0,0,8.886-8.717,15.711,15.711,0,0,0-.008-12.243,16.2,16.2,0,0,0-12.937-9.722L77.261,98.957l46.369,27.03,13.058,87.874L102.75,227.445ZM251.47,480l9.914-3.158c.287,1.055.567,2.11.83,3.158Zm12.9-20.9L201.148,479.24a16.8,16.8,0,0,1-4.908.76H152a16.019,16.019,0,0,1-16-16V445.416l32.809-13.123,53.231,10.024,47.539,15.126ZM456,464a16.019,16.019,0,0,1-16,16H395.726a15.964,15.964,0,0,1-4.851-.753L226.426,426.922a7.886,7.886,0,0,0-.946-.238l-56-10.546a8,8,0,0,0-4.451.434L136,428.184V382.777l38.749-6.458,45.673,22.836a7.989,7.989,0,0,0,2.782.805L456,423.24Z'/><path d='M287.745,223.821c2.068-.1,14.442-.1,16.511,0,2.374.12,4.811.179,7.229.179a116.169,116.169,0,0,0,16.5-1.052l1.222-.186-2.4-15.818-1.22.185a113.735,113.735,0,0,1-20.512.713c-2.337-.119-15.795-.119-18.131,0a113.9,113.9,0,0,1-20.512-.713l-1.221-.185-2.4,15.818,1.223.186A129.128,129.128,0,0,0,287.745,223.821Z'/><path d='M131.464,301.727c1.609,5.123,3.295,10.319,5.012,15.447l15.172-5.079c-1.685-5.033-3.34-10.135-4.919-15.163Z'/></g></svg>
            ";
            break;
        case "editorial":
            echo "
            <svg class='svgcss' style='width:".$width."px;' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512.003 512.003' style='enable-background:new 0 0 512.003 512.003;' xml:space='preserve'><g><g><path d='M105.07,360.931c-1.86-1.86-4.44-2.93-7.07-2.93s-5.21,1.069-7.07,2.93c-1.86,1.86-2.93,4.44-2.93,7.07 s1.07,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.07-2.931c1.86-1.859,2.93-4.439,2.93-7.069 S106.93,362.792,105.07,360.931z'/></g></g><g><g><path d='M401.07,274.931c-1.86-1.86-4.44-2.93-7.07-2.93s-5.21,1.069-7.07,2.93c-1.86,1.86-2.93,4.44-2.93,7.07 s1.07,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.07-2.931c1.86-1.859,2.93-4.439,2.93-7.069 S402.93,276.792,401.07,274.931z'/></g></g><g><g><path d='M354,84.001H138c-5.523,0-10,4.477-10,10v64c0,5.523,4.477,10,10,10h216c5.523,0,10-4.477,10-10v-64 C364,88.478,359.523,84.001,354,84.001z M344,148.001H148v-44h196V148.001z'/></g></g><g><g><path d='M354,196.001h-49c-5.523,0-10,4.477-10,10c0,5.523,4.477,10,10,10h49c5.523,0,10-4.477,10-10 C364,200.479,359.523,196.001,354,196.001z'/></g></g><g><g><path d='M503.815,431.121L325.432,252.737c-0.996-0.995-2.19-1.77-3.505-2.271l-94.692-36.141 c-3.683-1.405-7.849-0.516-10.637,2.272c-2.788,2.788-3.677,6.953-2.271,10.637l24.72,64.767H148v-76h49c5.523,0,10-4.477,10-10 c0-5.523-4.477-10-10-10h-59c-5.523,0-10,4.477-10,10v96c0,5.522,4.477,10,10,10h108.68l3.788,9.924 c0.502,1.315,1.276,2.51,2.271,3.506l14.57,14.57H138c-5.523,0-10,4.478-10,10c0,5.522,4.477,10,10,10h149.309l28,28H138 c-5.523,0-10,4.478-10,10c0,5.522,4.477,10,10,10h197.309l40,40H107.072c-4.704-25.014-26.713-44-53.072-44 c-12.877,0-24.71,4.537-34,12.088V54.001c0-18.748,15.252-34,34-34s34,15.252,34,34v270.6c0,5.522,4.477,10,10,10s10-4.478,10-10 v-260.6h266c5.514,0,10,4.486,10,10v172.294c0,5.523,4.477,10,10,10s10-4.477,10-10V74.001c0-16.542-13.458-30-30-30H107.057 c-4.705-25.012-26.698-44-53.057-44c-29.776,0-54,24.224-54,54v404c0,29.775,24.224,54,54,54h265.452c16.542,0,30-13.458,30-30 v-14H394c0.416,0,0.823-0.033,1.226-0.083l35.896,35.896c5.45,5.449,12.608,8.174,19.766,8.174c7.158,0,14.316-2.725,19.766-8.174 l33.161-33.162c5.28-5.279,8.188-12.299,8.188-19.766S509.094,436.4,503.815,431.121z M329.452,482.001c0,5.514-4.486,10-10,10H54 c-18.748,0-34-15.252-34-34s15.252-34,34-34s34,15.252,34,34c0,5.522,4.477,10,10,10h231.452V482.001z M263.65,300.377 l-22.671-59.398l59.399,22.67L263.65,300.377z M273.953,318.36l44.408-44.408l134.473,134.474l-44.408,44.408L273.953,318.36z M489.672,456.51l-33.161,33.162c-3.101,3.102-8.146,3.102-11.247,0l-22.696-22.696l44.408-44.408l22.696,22.696 c1.502,1.502,2.329,3.499,2.329,5.623C492.001,453.011,491.175,455.008,489.672,456.51z'/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
            ";
            break;
        case "category":
            echo "
            <svg class='svgcss' style='width:".$width."px;' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
            viewBox='0 0 420.379 420.379' style='enable-background:new 0 0 420.379 420.379;' xml:space='preserve'><g><g><path d='M372.375,45.351c-0.022-17.655-14.337-31.961-31.996-31.961H206.402c-8.486,0-16.624,3.37-22.625,9.37L9.375,197.126 c-12.499,12.496-12.5,32.758-0.003,45.257l133.977,133.978c6.248,6.248,14.438,9.373,22.628,9.373 c5.155,0,10.254-1.384,14.925-3.86c17.094-14.077-8.197,10.383,182.102-179.878c6.003-6.002,9.375-14.142,9.375-22.63 C372.379,43.466,372.38,66.681,372.375,45.351z M356.379,179.365c0,4.274-1.665,8.293-4.687,11.315L177.289,365.049 c-3.022,3.022-7.04,4.686-11.314,4.686s-8.291-1.665-11.314-4.686L20.686,231.07C17.664,228.048,16,224.029,16,219.756 c0-4.274,1.665-8.292,4.687-11.314L195.089,34.075c3.022-3.021,7.039-4.685,11.313-4.685h133.978c8.822,0,16,7.178,16,16V179.365z'/></g></g><g><g><path d='M404.379,45.39v149.974c0,4.274-1.665,8.293-4.687,11.315L210.663,395.674l11.313,11.314l189.028-188.994 c6.003-6.002,9.375-14.142,9.375-22.63V45.39H404.379z'/></g></g><g><g><path d='M284.379,69.39c-17.641,0-32,14.351-32,32s14.359,32,32,32s32-14.351,32-32S302.019,69.39,284.379,69.39z M284.379,117.39 c-8.828,0-16-7.18-16-16s7.172-16,16-16s16,7.18,16,16S293.207,117.39,284.379,117.39z'/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
            ";
            break;
        case "copies":
            echo "
            <svg class='svgcss' style='width:".$width."px;' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 493.181 493.181' style='enable-background:new 0 0 493.181 493.181;' xml:space='preserve'><g><g><path d='M487.391,454.135c-0.002-0.006-0.003-0.012-0.005-0.018L367.298,5.925c-1.144-4.256-5.516-6.786-9.776-5.656 L249.314,29.261c-1.484,0.44-2.804,1.312-3.792,2.504V14.589c0-4.418-3.582-8-8-8h-224c-4.418,0-8,3.582-8,8v464 c0,4.418,3.582,8,8,8h224c4.418,0,8-3.582,8-8V46.013l118.224,441.24c0.938,3.497,4.107,5.928,7.728,5.928 c0.691-0.005,1.379-0.096,2.048-0.272l108.184-28.992C485.977,462.786,488.522,458.406,487.391,454.135z M117.522,470.589h-96 v-448h96V470.589z M229.522,470.589h-96v-448h96V470.589z M377.13,475.389L261.186,42.645l92.728-24.856l115.944,432.744 L377.13,475.389z'/></g></g><g><g><path d='M93.522,54.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S97.94,54.589,93.522,54.589z'/></g></g><g><g><path d='M93.522,86.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S97.94,86.589,93.522,86.589z'/></g></g><g><g><path d='M205.522,54.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S209.94,54.589,205.522,54.589z'/></g></g><g><g><path d='M205.522,86.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S209.94,86.589,205.522,86.589z'/></g></g><g><g><path d='M349.038,60.73c-1.029-4.297-5.347-6.946-9.643-5.917c-0.14,0.034-0.279,0.071-0.417,0.112l-46.4,12.416 c-4.273,1.122-6.828,5.496-5.706,9.769s5.496,6.828,9.769,5.706c0.024-0.006,0.048-0.013,0.073-0.019l46.408-12.424 C347.419,69.344,350.067,65.027,349.038,60.73z'/></g></g><g><g><path d='M357.122,91.485c-1.144-4.268-5.532-6.8-9.8-5.656h-0.032l-46.36,12.424c-4.273,1.122-6.828,5.496-5.706,9.769 s5.496,6.828,9.769,5.706c0.024-0.006,0.048-0.013,0.073-0.019l46.4-12.424C355.734,100.141,358.266,95.753,357.122,91.485z'/></g></g><g><g><path d='M435.727,385.102c-1.155-4.234-5.504-6.747-9.749-5.633l-46.4,12.424c-4.268,1.142-6.802,5.528-5.66,9.796 c0.937,3.5,4.109,5.933,7.732,5.932h0.032c0.699-0.001,1.396-0.092,2.072-0.272l46.36-12.424 C434.376,393.763,436.889,389.365,435.727,385.102z'/></g></g><g><g><path d='M444.079,416.014c-1.155-4.234-5.504-6.747-9.749-5.633l-46.408,12.424c-4.268,1.142-6.802,5.528-5.66,9.796 c0.937,3.5,4.109,5.933,7.732,5.932c0.7,0.001,1.397-0.093,2.072-0.28l46.4-12.416 C442.728,424.675,445.241,420.277,444.079,416.014z'/></g></g><g><g><path d='M205.522,390.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S209.94,390.589,205.522,390.589z'/></g></g><g><g><path d='M205.522,422.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S209.94,422.589,205.522,422.589z'/></g></g><g><g><path d='M93.522,390.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S97.94,390.589,93.522,390.589z'/></g></g><g><g><path d='M93.522,422.589h-48c-4.418,0-8,3.582-8,8s3.582,8,8,8h48c4.418,0,8-3.582,8-8S97.94,422.589,93.522,422.589z'/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
            ";
            break;
        default:
            echo "
            <svg style='width:".$width."px;' viewBox='0 0 60 48' width='512' xmlns='http://www.w3.org/2000/svg'><g id='Page-1' fill='none' fill-rule='evenodd'><g id='037---404-Page' fill='#c50000' fill-rule='nonzero'><path id='Shape' d='m27 6h6c.5522847 0 1-.44771525 1-1s-.4477153-1-1-1h-6c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1z'/><path id='Shape' d='m44 6h11c.5522847 0 1-.44771525 1-1s-.4477153-1-1-1h-11c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1z'/><path id='Shape' d='m55 0h-50c-2.76005315.00330612-4.99669388 2.23994685-5 5v38c.00330612 2.7600532 2.23994685 4.9966939 5 5h50c2.7600532-.0033061 4.9966939-2.2399468 5-5v-38c-.0033061-2.76005315-2.2399468-4.99669388-5-5zm-50 2h50c1.6568542 0 3 1.34314575 3 3v3h-56v-3c0-1.65685425 1.34314575-3 3-3zm50 44h-50c-1.65685425 0-3-1.3431458-3-3v-33h56v33c0 1.6568542-1.3431458 3-3 3z'/><circle id='Oval' cx='5' cy='5' r='1'/><circle id='Oval' cx='9' cy='5' r='1'/><circle id='Oval' cx='13' cy='5' r='1'/><path id='Shape' d='m18 32c0 .5522847.4477153 1 1 1s1-.4477153 1-1v-2h2c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1h-2v-2c0-.5522847-.4477153-1-1-1s-1 .4477153-1 1v2h-5.211l7.063-11.476c.2539327-.4666582.0986357-1.0504199-.3536085-1.3292152-.4522443-.2787953-1.0435494-.1552918-1.3463915.2812152l-7.066 11.477c-.3791731.6171256-.3950579 1.3910301-.041527 2.0231948.3535309.6321646 1.0212231 1.0237866 1.745527 1.0238052h5.21z'/><path id='Shape' d='m48 28h-2v-2c0-.5522847-.4477153-1-1-1s-1 .4477153-1 1v2h-5.211l7.063-11.476c.2110153-.3041508.2367456-.6999905.0668803-1.0288992-.1698654-.3289087-.5075332-.537071-.8776942-.5410726s-.71225.1968122-.8891861.5219718l-7.066 11.477c-.3791731.6171256-.3950579 1.3910301-.041527 2.0231948.3535309.6321646 1.0212231 1.0237866 1.745527 1.0238052h5.21v2c0 .5522847.4477153 1 1 1s1-.4477153 1-1v-2h2c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1z'/><path id='Shape' d='m29 33h2c2.209139 0 4-1.790861 4-4v-10c0-2.209139-1.790861-4-4-4h-2c-2.209139 0-4 1.790861-4 4v10c0 2.209139 1.790861 4 4 4zm-2-14c0-1.1045695.8954305-2 2-2h2c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-2c-1.1045695 0-2-.8954305-2-2z'/><path id='Shape' d='m42 38h-24c-.5522847 0-1 .4477153-1 1s.4477153 1 1 1h24c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1z'/><path id='Shape' d='m33 42h-6c-.5522847 0-1 .4477153-1 1s.4477153 1 1 1h6c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1z'/></g></g></svg>
            ";
            break;
    }
}
?>

Con una clase CSS general:

.svgcss {
    fill: #1dc9b7;
}

Para añadir SVG, lo descargas lo abres en código y lo pegas dentro de cada case en el echo. Luego al llamar a la función getSVG(); le indicas el nombre del icono y el width que quieres. Se cuadraría solo. También podrías añadirle para indicarle un Height concreto también.

Luego para cualquier otro ajuste general, en el class CSS lo editas.

Para hacer que durante el hover cambie de color, añades este css:

.svgcss:hover{
  fill: #fff; // color
}

Para luego llamar el SVG en las páginas sería:

<?php getSVG("editorial","40"); //("nombre del svg","width"); ?>

En tu código:

<div class="social">                     
<li>
<a href="index.html" class="socialancla">
<?php getSVG("instagram","40"); ?>
</a>
</li>
<li>
<a href="index.html" class="socialancla">
<?php getSVG("linkedin","40"); ?>
</a>
</li>          
</div>

Esta función es para SVG monocromáticos. Si el SVG que quieres usar tiene varios colores tendrás que añadirle un parámetro a la función por cada color extra para que puedas llamarles con sus colores.

0

Unas alternativas:

  • hover con un filter de brillo

img:hover,
svg:hover {
  cursor: pointer;
  filter: brightness(0.7);
}
<body>
  <h2>sólo filter en la img</h2>
  <img width=64 height=64
  src="https://upload.wikimedia.org/wikipedia/commons/5/53/Blank_woman_placeholder.svg" />
  <img width=120 
  src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Placeholder_no_text.svg" />
</body>

  • un filter que intenta cambiar colores ( al ser grises se complica manipular sólo el hue )

/* cambiar hue/saturation */
var hue = document.getElementById("hueRange")
var sat = document.getElementById("satRange")

hue.addEventListener("change", tintureaIMG)
sat.addEventListener("change", tintureaIMG)
tintureaIMG()

function tintureaIMG() {
  var x = document.getElementsByClassName("cambiaColor");
  i = x.length;
  while (i--) {
    var cssFilter = `sepia(100%) hue-rotate(${hue.value}deg) saturate(${sat.value}%)`
    x[i].style.filter = cssFilter;
    var nl = "\n"
    document.getElementById("filterString").innerText =
      `img.cambiaColor:hover{${nl}  filter: ${cssFilter}${nl}}`;
  }
}
img.svgImg {
  display: none;
}

img:hover,
svg:hover {
  cursor: pointer;
  filter: brightness(0.7);
}
<body>
  <h2>prueba filter cambiando color en la img</h2>
  <!-- al ser grises hay que darles un color ( sepia ) y luego manipular un poco la saturación/hue -->
  <pre id=filterString></pre>
  <input type="range" min="-180" max="180" value="0" step=1 id="hueRange">
  <input type="range" min="0" max="500" value="100" step=50 id="satRange">
  <img class="cambiaColor" width=64 height=64 src="https://upload.wikimedia.org/wikipedia/commons/5/53/Blank_woman_placeholder.svg" />
  <img class="cambiaColor" width=120 src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Placeholder_no_text.svg" />
</body>

  • usando javascript para reemplazar el img por un svg

/* reemplazar img por svg  */
/* cargamos el svg por url en un node usando promesas */
function getSVG(url) {
  return new Promise((resolve, reject) => {
    fetch(url).then(function(response) {
        // procesamos la respuesta como texto
        return response.text();
      })
      .then(function(bodyText) {
        // creamos un elemento contenedor temporal
        var unDiv = document.createElement('div');
        // descartamos el xml coso que viene en algunos svg
        var svgString = bodyText.substring(bodyText.indexOf("<svg")).trim();
        // creamos el nodo a partir del html dentro del elemento temporal
        unDiv.innerHTML = svgString;
        // retornamos el node svg
        var svgNode = unDiv.firstChild;
        resolve(svgNode);
      })
      .catch(err => {
        reject(err)
      })
  });
}

async function cambiaIMGxSVG(laClasedelosSVG) {
  var x = document.getElementsByClassName(laClasedelosSVG);
  i = x.length;
  while (i--) {
    var a = x[i];
    var svgSrc = a.getAttribute("src");
    var imgWidth = a.getAttribute("width");
    var imgHeight = a.getAttribute("height");

    // esperamos el fetch para manipular el svg como nodo
    var svgNode = await getSVG(svgSrc);

    // copiamos la lista de clases de la img original
    svgNode.classList.add(...a.classList)

    // si el svg no tiene un viewBox se lo creamos
    var svgWidth = svgNode.getAttribute("width");
    var svgHeight = svgNode.getAttribute("height");
    var svgViewBox = svgNode.getAttribute("viewBox");
    if (!svgViewBox) {
      svgNode.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
    }

    // console.log(svgWidth, svgHeight, svgViewBox)

    svgNode.style.width = imgWidth ? imgWidth : svgWidth;
    svgNode.style.height = imgHeight ? imgHeight : imgHeight;

    svgNode.removeAttribute("width");
    svgNode.removeAttribute("height");
    // le decimos que escale proporcional al centro
    svgNode.setAttribute("preserveAspectRatio", "xMidYMid")
    // insertamos antes de la img
    a.parentNode.insertBefore(svgNode, a)
    // borramos la img
    a.remove()
  }
}
document.addEventListener('DOMContentLoaded', function() {
  cambiaIMGxSVG("svgImg")
});
img.svgImg {
  display: none;
}

img:hover,
svg:hover {
  cursor: pointer;
  filter: brightness(0.7);
}

svg.amarillo path {
  fill: #ff0!important;
}

svg.amarillo:hover path {
  fill: #fa0!important;
}

svg.rojo path {
  fill: #f00!important;
}

svg.rojo:hover path {
  fill: #fa0!important;
}

svg.verde path {
  fill: #0f0!important;
}

svg.verde:hover path {
  fill: #af0!important;
}

svg.azul path {
  fill: #00f!important;
}

svg.azul:hover path {
  fill: #a0f!important;
}
<body>
  <h2>filter en svg y color fill en path</h2>
  <img class="svgImg verde" width=80 src="https://upload.wikimedia.org/wikipedia/commons/5/53/Blank_woman_placeholder.svg" />
  <img class="svgImg rojo" width=120 src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Placeholder_no_text.svg" />
  <img class="svgImg azul" width=32 src="https://upload.wikimedia.org/wikipedia/commons/5/53/Blank_woman_placeholder.svg" />
  <img class="svgImg amarillo" src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Placeholder_no_text.svg" />
  <img class="svgImg rojo" width=64 height=64 src="https://upload.wikimedia.org/wikipedia/commons/5/53/Blank_woman_placeholder.svg" />
  <img class=svgImg src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Placeholder_no_text.svg" />
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.