christie christie - 2 months ago 16
HTML Question

svg in img tag not showing (modified with illustrator clipping mask)

I have a svg image of an instagram icon that I exported with clipping mask in Illustrator. saved as svg
However, when I I try to display it, it doesn't show in any browser. (Other social icons showed)

showing social icons

I used the img tag to display the svg as it is displayed finely with other icons. Am I doing something wrong? Does img tag support clipping mask images?
Sorry that I don't have much experience with svg. Any suggestion is very appreciated! Thanks!
Here is my code:

<nav id="socialNav">
<ul>
<li><a href="#facebook.html" target="_blank"><img src="../../_images/social-facebook.svg"></a></li>
<li><a href="#instagram.html" target="_blank"><img src="../../_images/social-instagram_color-01.svg"></a></li>
<li><a href="#twitter.html" target="_blank"><img src="../../_images/social-twitter.svg"></a></li>
<li><a href="#googleplus.html" target="_blank"><img src="../../_images/social-googleplus_test.svg"></a></li>
</ul>
</nav>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="56.7px" height="56.7px" viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve">
<g>
<g>
<defs>
<path id="SVGID_1_" d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8c0,7.1,5.7,12.799,12.8,12.799C35.299,42.299,41,36.5,41,29.5
C41,22.5,35.2,16.7,28.2,16.7z M28.2,37.7C23.7,37.7,20,34,20,29.5c0-4.5,3.7-8.202,8.2-8.202c4.5,0,8.2,3.7,8.2,8.202
C36.4,34,32.7,37.7,28.2,37.7z M41.5,13.5c1.602,0,2.898,1.298,2.898,2.9s-1.298,2.9-2.898,2.9c-1.602,0-2.9-1.298-2.9-2.9
S39.899,13.5,41.5,13.5z M49,8.9C46.4,6.2,42.7,4.8,38.5,4.8H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.302,1.4,8,4.2,10.701
C10.3,53.1,13.9,54.4,18,54.4h20.4c4.3,0,7.899-1.399,10.5-3.899C51.6,47.9,53,44.2,53,39.9V19.3C53,15.1,51.6,11.5,49,8.9z
M48.4,39.9c0,3.101-0.899,5.601-2.7,7.3c-1.8,1.7-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.898-7.3-2.6c-1.8-1.8-2.7-4.3-2.7-7.4V19.3
c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2v20.6H48.4z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g id="LF6r1C.tif_2_" clip-path="url(#SVGID_2_)">

<image overflow="visible" enable-background="new " width="601" height="514" id="Layer_0_3_" xlink:href="B91C5780217A8A7F.png" transform="matrix(0.0961 0 0 0.1609 -2.4072 -11.1685)">
</image>
</g>
</g>
</g>
</svg>


enter image description here

Answer

Here'e the image with a few changes. The clip-path's coords have instead been used to create a path, which is then filled with a radial gradient. The file is now simply a filled path, rather than a clipped image. It's going to scale better, is 99% smaller (1283 bytes total vs 135Kb just for the gradient) and avoids the problem inherent with linked (vs embedded) files. Enjoy! Hit the Blue button to see it.

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 56.7 56.7" viewBox="0 0 56.7 56.7" y="0px" x="0px" width='56.7' height='56.7'>
<defs>
	<radialGradient id="a" gradientUnits="userSpaceOnUse" cy="47.1" cx="16.48" gradientTransform="matrix(2.215 0 0 2.215 -20.03 -57.24)" r="25.3">
		<stop stop-color="#f9d363" offset="0"/>
		<stop stop-color="#f26c1f" offset=".3658"/>
		<stop stop-color="#ce0665" offset=".6829"/>
		<stop stop-color="#541fdb" offset="1"/>
	</radialGradient>
</defs>
<path d="m28.2 16.7c-7 0-12.8 5.7-12.8 12.8s5.7 12.8 12.8 12.8 12.8-5.8 12.8-12.8-5.8-12.8-12.8-12.8zm0 21c-4.5 0-8.2-3.7-8.2-8.2s3.7-8.202 8.2-8.202 8.2 3.7 8.2 8.202c0 4.5-3.7 8.2-8.2 8.2zm13.3-24.2c1.602 0 2.898 1.298 2.898 2.9s-1.298 2.9-2.898 2.9c-1.602 0-2.9-1.298-2.9-2.9s1.299-2.9 2.9-2.9zm7.5-4.6c-2.6-2.7-6.3-4.1-10.5-4.1h-20.6c-8.7 0-14.5 5.8-14.5 14.5v20.5c0 4.302 1.4 8 4.2 10.7 2.7 2.6 6.3 3.9 10.4 3.9h20.4c4.3 0 7.899-1.399 10.5-3.899 2.7-2.6 4.1-6.3 4.1-10.6v-20.6c0-4.2-1.4-7.8-4-10.4zm-0.6 31c0 3.101-0.899 5.601-2.7 7.3-1.8 1.7-4.3 2.6-7.3 2.6h-20.4c-3 0-5.5-0.898-7.3-2.6-1.8-1.8-2.7-4.3-2.7-7.4v-20.5c0-3 0.9-5.5 2.7-7.3 1.7-1.7 4.3-2.6 7.3-2.6h20.6c3 0 5.5 0.9 7.3 2.7 1.7 1.8 2.7 4.3 2.7 7.2v20.6h-0.2z" fill-rule="evenodd" fill="url(#a)"/>
</svg>