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.
fill
en lugar debackground
ostroke
en lugar deborder
. Esto es solo un ejemplo. Los colores en el elemento a manipular no deben estar definidos.<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.fil
tendrías que utilizar elementos svg inline