Prezados,
Também fiquei curioso com os eventuais problemas enfrentados ao utilizarmos o recurso Image Replacement e decidi pesquisar mais sobre o assunto, inclusive aqui no fórum. Lendo esse artigo do CSS-Tricks, entendi que esse recurso, atualmente, não é mais necessário.
Analisando o código-fonte dessa página, vi que as imagens estão em SVG e, de acordo com o artigo do CSS-Tricks, seria uma das soluções para o Image Replacement. Poderiam esclarecer se o meu entendimento está correto?
<div class="footer-links">
<h2 class="footer-links-title">Acompanhe-nos</h2>
<ul role="presentation" class="footer-socialMedia">
<li class="footer-socialMedia-item">
<a class="footer-socialMedia-item-link" href="https://www.youtube.com/user/aluracursosonline" target="_blank" title="Youtube da Alura">
<svg class="footer-socialMedia-item-icon footer-socialMedia-list-item-youtube">
<use xlink:href="/images/icons-redes-hipster.svg#icon-footer-youtube"/>
</svg>
</a>
</li>
<li class="footer-socialMedia-item">
<a class="footer-socialMedia-item-link" href="https://www.facebook.com/AluraCursosOnline/" target="_blank" title="Facebook da Alura">
<svg class="footer-socialMedia-item-icon footer-socialMedia-list-item-facebook">
<use xlink:href="/images/icons-redes-hipster.svg#icon-footer-facebook"/>
</svg>
</a>
</li>
<li class="footer-socialMedia-item">
<a class="footer-socialMedia-item-link" href="https://twitter.com/aluraonline" target="_blank" title="Twitter da Alura">
<svg class="footer-socialMedia-item-icon footer-socialMedia-list-item-twitter">
<use xlink:href="/images/icons-redes-hipster.svg#icon-footer-twitter"/>
</svg>
</a>
</li>
<li class="footer-socialMedia-item">
<a class="footer-socialMedia-item-link" href="http://hipsters.tech/" target="_blank" title="Podcast Hipsters Ponto Tech">
<svg class="footer-socialMedia-item-icon footer-socialMedia-list-item-hipsters">
<use xlink:href="/images/icons-redes-hipster.svg#icon-footer-hipsters"/>
</svg>
</a>
</li>
</ul>
</div>
