Safari iOS changing SVG fill gradient url - css

in the footer of my site I have social icons as SVGs that fill depending on screen size and hover state.
One example is for instagram:
HTML:
<a href="https://www.instagram.com/pacific_beach_homes/" title="Visit our Instagram page" target="blank" >
<svg class="instagram" alt="Instagram icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title>
<defs>
<linearGradient id="ig-gradient">
<stop offset="0%" stop-color="#F8ED34" />
<stop offset="50%" stop-color="#EA118D" />
<stop offset="100%" stop-color="#2E368F" />
</linearGradient>
</defs>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
CSS:
.instagram {
fill: #fe4164;
fill: url('#ig-gradient');
}
I included a backup color above the fill:url(...) because I thought this might fix it if Safari doesn't accept gradient fills. But that is not the problem. It seems that safari is actually changing the url from what is typed in the css file.
On most browsers, the fill: url(#ig-gradient); is working fine. However Safari for iOS is different. . .
Safari for iOS is changing the fill url to a full url link: url(https://pacificbeachhomes.com/wp-content/themes/pacificbeachhomes/#ig-gradient) which doesnt work, instead of url(#ig-gradient) which works. .. .
Anyone know why safari for iOS is adding the domain? I tried putting the fill url in quotes (shown above) and without quotes and it doesnt seem to change.
active site is: pacificbeachhomes.com

Related

Change svg file color on hover [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 8 months ago.
I'm working on a frontendmentor challenge, and it came with a few svg files to use in the footer, and the last thing I need to do is make those svgs change color when you hover over them. Typically, I'd use filter:hue-rotate() but that only seems to work on some of the svg files, but not others.
For instance, if I have this html:
<footer>
<img src="./images/logo.svg">
<img src="./images/icon-facebook.svg">
</footer>
... and this CSS:
footer img {
filter:hue-rotate(90deg);
}
.. then the logo image gets color shifted but the facebook image does not. I'm able to view the contents of the svg images in VSCode, and they are a bit different, as the logo has a few components, while the facebook logo is much simpler. Here's the contents:
logo.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="20">
<defs>
<linearGradient id="a" x1="72.195%" x2="17.503%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#33D35E" />
<stop offset="100%" stop-color="#2AB6D9" />
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="#2D314D" fill-rule="nonzero"
d="M37.754 15.847c2.852 0 5.152-1.622 5.952-4.216h-3.897c-.376.665-1.14 1.066-2.055 1.066-1.237 0-2.065-.674-2.32-1.978h8.44c.051-.352.081-.694.081-1.037 0-3.335-2.537-5.95-6.201-5.95-3.568 0-6.175 2.564-6.175 6.049 0 3.473 2.628 6.066 6.175 6.066zm2.344-7.297h-4.596c.317-1.129 1.11-1.749 2.252-1.749 1.181 0 2 .613 2.344 1.75zm10.946 7.296c1.32 0 2.5-.434 3.43-1.188l.336.804h3.027V4.093h-2.919l-.4.88c-.94-.775-2.135-1.222-3.474-1.222-3.476 0-5.961 2.505-5.961 6.026 0 3.533 2.485 6.07 5.961 6.07zm.524-3.467c-1.467 0-2.545-1.108-2.545-2.593 0-1.475 1.069-2.583 2.545-2.583 1.466 0 2.544 1.108 2.544 2.583 0 1.485-1.078 2.593-2.544 2.593zm13.123 3.467c3.02 0 5.025-1.554 5.025-3.93 0-2.883-2.387-3.256-4.183-3.575-1.08-.193-1.95-.344-1.95-.99 0-.527.422-.838 1.05-.838.71 0 1.197.337 1.197 1.063h3.667c-.044-2.303-1.92-3.843-4.816-3.843-2.912 0-4.854 1.47-4.854 3.75 0 2.757 2.337 3.289 4.1 3.574 1.092.181 1.952.368 1.952 1.024 0 .587-.543.88-1.116.88-.742 0-1.32-.383-1.32-1.214h-3.77c.036 2.463 1.919 4.1 5.018 4.1zm8.1 3.858c2.936 0 4.344-1.257 5.877-4.736l4.764-10.863h-4.206l-2.249 6.263-2.412-6.263H70.31l4.698 10.43c-.53 1.414-.983 1.804-2.48 1.804H71.45v3.365h1.341zm18.504-3.858c3.5 0 5.973-2.515 5.973-6.048S94.796 3.75 91.295 3.75a5.332 5.332 0 00-2.825.784V0H84.6v15.474h2.897l.37-.844c.923.771 2.102 1.216 3.428 1.216zm-.523-3.467c-1.467 0-2.545-1.108-2.545-2.58 0-1.486 1.078-2.594 2.545-2.594 1.466 0 2.544 1.108 2.544 2.593 0 1.473-1.087 2.58-2.544 2.58zm13.598 3.467c1.32 0 2.5-.434 3.43-1.188l.336.804h3.027V4.093h-2.918l-.401.88c-.939-.775-2.135-1.222-3.474-1.222-3.476 0-5.96 2.505-5.96 6.026 0 3.533 2.484 6.07 5.96 6.07zm.524-3.467c-1.467 0-2.545-1.108-2.545-2.593 0-1.475 1.07-2.583 2.545-2.583 1.467 0 2.545 1.108 2.545 2.583 0 1.485-1.078 2.593-2.545 2.593zm12.653 3.095V9.403c0-1.447.702-2.3 1.923-2.3.986 0 1.483.657 1.483 1.98v6.39h3.915V8.543c0-2.897-1.733-4.773-4.373-4.773-1.47 0-2.733.565-3.58 1.508l-.537-1.172h-2.747v11.369h3.916zm13.748 0v-4.808l2.848 4.808h4.616l-3.902-5.95 3.543-5.419h-4.397l-2.708 4.454V0h-3.916v15.474h3.916z" />
<g fill="url(#a)">
<path d="M10.802 0L0 19.704h5.986L16.789 0z" />
<path opacity=".5" d="M18.171 0L7.368 19.704h5.986L24.157 0z" />
<path opacity=".15" d="M25.539 0L14.737 19.704h5.986L31.525 0z" />
</g>
</g>
</svg>
icon-facebook.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#FFF"
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" />
</svg>
So the question is, what's the technical difference in why logo can utilize css filters but facebook cannot? And ultimately, what's the solution here to make the facebook logo change colors when hovered? Using fill:#f00 doesn't seem to work either as I can't target the inner svg components since its a file.
Note: I could create a 2nd image and color it differently and swap between them, or I could extract the inner svg stuff and insert that into the page instead, but I'm really trying to understand/solve the .svg file problem. Or at least verify 100% that it can't be done.
Note2: StackOverflow showed me another similar question (similar, but NOT THE SAME), and the answer there was that you can't affect svg file color/fill with CSS only inline SVG elements. Ok, noted, but what about CSS filters? They seem to work on the logo image but not the Facebook image, so why is that? What's the main thing there that's causing it work on one but not the other.

When I use this in my css, I can make the facebook logo any color I want:
footer img:hover {
background-color: *Any color you want it to be*;
}
But the point is, this works well for the Facebook logo but not for the first logo..

SVG linear gradient doesn't work on other elements

I created an SVG logo and want to animate it inside a React component.
In my SVG I have 3 different gradients: green, orange, and red.
I noticed that when I'm trying to assign a gradient via className to another element it fills it with just a plain color.
Could you please help me to understand what I'm doing wrong here?
here is the code:
https://codesandbox.io/s/shy-moon-zs1ik5

You have a gradient with cx="1202.5" cy="249.5" and a radius of r="18.5". This falls in the center of the first rectangle but far away from the center of the second one. The fill of this one is the peripheric red from the gradient.
A possible solution would be using the same path with the <use> element for all the identical paths you have. Next you give the use the required class.
Please observe that I've putted the path in the defs. Also the path has an id neded for the xlink:href of the use element.
.red-light{fill: url(#red-gradient);}
<svg viewBox="700 230 200 200">
<defs>
<radialGradient id="red-gradient" cx="1202.5" cy="249.5" r="18.5" gradientUnits="userSpaceOnUse">
<stop offset="0.04" stop-color="#fff"></stop>
<stop offset="0.12" stop-color="#fef4f3"></stop>
<stop offset="0.28" stop-color="#fad8d4"></stop>
<stop offset="0.49" stop-color="#f4aba1"></stop>
<stop offset="0.74" stop-color="#eb6b5b"></stop>
<stop offset="1" stop-color="#e1230a"></stop>
</radialGradient>
<path id="indicator" d="M1216.65,268h-28.3a4.69,4.69,0,0,1-4.35-4.35v-28.3a4.69,4.69,0,0,1,4.35-4.35h28.3a4.69,4.69,0,0,1,4.35,4.35v28.3C1221,268,1218.78,268,1216.65,268Z"></path>
</defs>
<use xlink:href="#indicator" id="indicator-3" data-name="indicator-3" class="red-light" transform="translate(-420)" />
<use xlink:href="#indicator" id="indicator-10" data-name="indicator-10" class="red-light" transform="translate(-460,50)" />
</svg>

How to incorporate svg path morph animation into a React app

I can't manage to animate a smooth transition between two similar <path />'s
There's this background effect I try to manage in my React app, where you have some blobs floating around that need to deform over time. I've created two blob shapes and tried to animate them via svg <animate /> tag but it only shifts momentarily from one shape to another after set dur property.
I've tried a few libraries like "react-spring" or react-something-svg (there's quite a stack of them out there) but the best I got was to have a path only morph animation with no fill or gradient properties.
Two shapes to shift between:
<svg>
<defs>
<radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
<stop stop-color="#00f" offset="0"/>
<stop stop-color="#00f3ff" offset="1"/>
</radialGradient>
</defs>
<g transform="translate(-67.756 -51.842)">
<path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c1.008-6.2604 4.104-12.132 8.5366-16.666s10.166-7.7395 16.293-9.3701c12.256-3.2613 25.688-0.11296 36.296 6.8373 10.608 6.9503 18.58 17.4 24.228 28.755 5.6488 11.355 9.1245 23.653 12.182 35.961 3.0568 12.306 5.7394 24.802 6.0332 37.479 0.29383 12.677-1.9195 25.642-8.1354 36.694-3.1079 5.5261-7.1991 10.523-12.159 14.473-4.9595 3.9497-10.796 6.8358-17 8.1437s-12.77 1.0114-18.756-1.0776c-5.9861-2.089-11.361-5.9944-15.007-11.181-3.1833-4.5287-5.0021-9.9148-5.8599-15.383-0.85782-5.4687-0.79005-11.042-0.45735-16.567 0.6654-11.051 2.3656-22.3-0.18511-33.073-2.7384-11.566-10.084-21.385-16.303-31.514-3.1096-5.0645-5.9863-10.317-7.8786-15.95-1.8923-5.6336-2.7725-11.692-1.8278-17.56z" fill="url(#radialGradient827)" stroke-width="0"/>
</g>
</svg>
<svg>
<defs>
<radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
<stop stop-color="#00f" offset="0"/>
<stop stop-color="#00f3ff" offset="1"/>
</radialGradient>
</defs>
<g transform="translate(-60.376 -63.391)">
<path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0"/>
</g>
</svg>
Here's a sandbox to play around: click here
I want to understand how to morph between two svg paths with a slow transition and having my gradient applied without using some specialized react animation library and incorporate it into my React app.
All I can do for now is to morph between to unstyled shapes using quite a few libraries and to shift from one shape to another momentarily

You can make the blobs preserve their final shape after the animation by specifying the fill property of the <animation> tag:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 141 231" xmlns="http://www.w3.org/2000/svg" >
<radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse">
<stop stop-color="#00f" offset="0"/>
<stop stop-color="#00f3ff" offset="1"/>
</radialGradient>
<path id="blob" transform="translate(-60.376 -63.391) matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0">
<animate
attributeName="path"
to="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z"
dur="1s"
fill="freeze" />
</path>
</svg>
NOTE: For the animation to work you need to ensure that both the initial and the final path have the same number of points, as detailed in here. Here's a great tool to make sure that the animation is possible.
On regards to your gradient, the browser should take care of that. You can simply apply it as you would on any other SVG file.
Avoiding JS libraries to deal with SVG animation is a great move, those tend to be bloated and messy. Stick to the official SVG specs whenever possible.

SVG Animations not working on Google Chrome or IE

My code is
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="280px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path
fill="transparent"
stroke="#424A52"
stroke-width="1"
stroke-dasharray="1000"
d="M184.127,70.885c0,0-0.495,1.486-1.75,1.486h-5.501h-6.361c-7.482,0.115-15.246,0-15.246,0h-19.685h-0.29
c-5.167,0-9.35-4.188-9.35-9.35c0-0.24,0.004-0.473,0.021-0.709V28.389v-0.245c0-5.167,4.185-9.351,9.352-9.351h19.109h9.717
l4.35,0.004V2.442c0-0.723-0.178-2.442,1.58-2.442h5.818h6.658c1.75,0,1.572,1.72,1.572,2.442L184.127,70.885z M164.144,32.04
l-9.717-0.012c-3.534-0.009-6.987-0.004-8.312,0.012c-3.113,0.027-4.432,1.942-4.432,3.826V55.89c0,1.883,1.318,3.802,4.432,3.825
c3.113,0.027,9.153,0,9.153,0h9.952c2.596,0,3.268-0.602,3.268-2.487V32.04H164.144z M120.82,70.885c0,0-0.496,1.486-1.751,1.486
h-5.496h-6.366c-7.477,0.115-15.242,0-15.242,0H72.276h-0.287c-5.165,0-9.354-4.188-9.354-9.35c0-0.24,0.013-0.473,0.028-0.709
V28.389l-0.006-0.245c0-5.167,4.19-9.351,9.354-9.351H91.12h9.716h4.35l0.008-16.351c0-0.723-0.186-2.442,1.569-2.442h5.826h6.651
c1.758,0,1.574,1.72,1.574,2.442L120.82,70.885z M100.837,32.04l-9.716-0.012c-3.536-0.009-6.988-0.004-8.311,0.012
c-3.116,0.027-4.428,1.942-4.428,3.826V55.89c0,1.883,1.312,3.802,4.428,3.825c3.11,0.027,9.154,0,9.154,0h9.947
c2.603,0,3.268-0.602,3.268-2.487l0.007-25.188H100.837z M41.873,39.316v-3.304l0.013-0.256c0-1.881-1.376-3.433-3.172-3.729
c-0.189-0.031-0.385-0.052-0.599-0.052H3.391c0,0-1.428-0.111-1.428-1.431V19.732c0,0,0.059-0.975,1.262-0.975h0.166H48.17
c5.042,0.059,9.054,3.958,9.279,8.848c0.033,0.379,0.059,0.769,0.059,1.178v41.902c0,0,0.224,1.735-1.407,1.735H9.262l-0.178-0.026
c-3.305-0.071-6.177-1.865-7.76-4.524C0.524,66.646,0,65.094,0,63.135c0-8.196,0.028-14.571,0.028-14.571
c0-5.114,4.146-9.258,9.257-9.258l0.448,0.011L41.873,39.316L41.873,39.316z M12.519,52.915v4.377c0,1.526,1.238,2.764,2.764,2.764
H41.96v-9.9H15.282C13.757,50.154,12.519,51.391,12.519,52.915z M238.49,18.847c4.27,0.044,7.776,2.801,8.943,6.583
c0.264,0.839,0.419,1.751,0.419,2.758v17.447V63.03c0,4.961-3.825,9.006-8.678,9.352c-0.23,0.027-0.448,0.039-0.647,0.039h-19.976
h-19.967c-4.396-0.008-8.056-3.025-9.065-7.098c-0.171-0.701-0.271-1.449-0.271-2.258v-17.43V28.218v-0.151
c0.024-0.847,0.124-1.529,0.289-2.169c0.977-3.841,4.341-6.727,8.409-7.012c0.229-0.026,0.449-0.039,0.656-0.039h19.948H238.49z
M228.722,31.97h-10.17h-10.178c-0.1,0-0.211,0.007-0.332,0.021c-2.078,0.144-3.785,1.622-4.288,3.579
c-0.086,0.324-0.138,0.676-0.147,1.186v8.88v8.893c0,0.408,0.05,0.795,0.136,1.146c0.517,2.078,2.385,3.623,4.628,3.623h10.182
h10.186c0.108,0,0.216-0.004,0.332-0.021c2.474-0.175,4.425-2.237,4.425-4.771v-8.869v-8.896c0-0.52-0.074-0.986-0.214-1.407
C232.688,33.404,230.899,31.997,228.722,31.97z M284.508,42.245c-1.627,1.908-3.631,2.168-4.997,2.168
c-2.052,0-3.748-0.637-5.115-2.264c-1.179-1.367-2.099-3.561-2.099-6.507c0-4.597,2.264-8.723,7.214-8.723
c5.517,0,7.144,4.856,7.12,8.628C286.606,38.094,285.853,40.665,284.508,42.245z M279.51,28.288c-4.242,0-5.539,4.196-5.539,7.379
c0,3.087,1.226,7.332,5.47,7.332c5.14,0,5.492-6.082,5.492-7.425C284.958,32.555,283.73,28.288,279.51,28.288z M291.252,43.988
h-1.533V27.344h10.892v1.391h-9.358v5.634h8.394v1.368h-8.394V43.988L291.252,43.988z M304.5,43.988h-1.533V27.344h10.893v1.391
h-9.357v5.634h8.393v1.368h-8.393v8.251H304.5z M317.797,43.988h-1.58V27.344h1.58V43.988z M334.323,40.357
c-1.603,3.536-4.102,4.056-6.177,4.056c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.934-3.818-1.934-6.412
c0-3.536,1.273-8.864,7.119-8.864c4.479,0,5.705,2.711,6.437,4.314l-1.58,0.825c-0.306-1.368-1.084-2.381-1.769-2.9
c-1.107-0.825-2.428-0.849-3.018-0.849c-1.791,0-3.041,0.519-4.103,1.957c-1.154,1.58-1.438,3.489-1.438,5.281
c0,1.132,0.166,3.843,1.391,5.494c1.32,1.769,3.229,1.957,4.408,1.957c0.803,0,1.746-0.095,2.617-0.707
c0.59-0.401,1.51-1.367,1.909-2.83L334.323,40.357z M348.799,43.988H337.34V27.344h10.869v1.462h-9.289v5.917h8.416v1.462h-8.416
v6.341h9.879V43.988z M359.502,43.988h-1.533V27.344h10.892v1.391h-9.358v5.634h8.394v1.368h-8.394V43.988L359.502,43.988z
M372.75,27.344v9.903c0,1.814,0.023,3.088,0.801,4.125c0.566,0.754,1.793,1.58,3.867,1.58c0.59,0,1.392-0.048,2.168-0.354
c1.273-0.495,1.935-1.298,2.287-2.759c0.143-0.565,0.166-1.557,0.166-2.17V27.344h1.578v7.568c0,4.62,0,6.2-1.414,7.732
c-1.201,1.297-2.994,1.769-4.738,1.769c-2.805,0-5.115-1.203-5.894-3.606c-0.401-1.202-0.378-2.122-0.378-5.752v-7.709
L372.75,27.344L372.75,27.344z M400.168,43.988h-1.979l-5.259-7.379h-3.913v7.379h-1.58V27.321h4.668c2.9,0,3.631,0.023,4.668,0.377
c2.734,0.966,2.924,3.583,2.924,4.408c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.226-3.678,1.297L400.168,43.988z
M389.018,35.242h3.913c1.085,0,2.099-0.024,2.806-0.165c1.768-0.354,2.404-1.698,2.404-3.042c0-1.626-0.803-2.853-2.428-3.183
c-0.473-0.094-0.685-0.118-2.782-0.118h-3.913V35.242L389.018,35.242z M415.54,43.988h-1.555l-9.783-14.381v14.381h-1.533V27.344
h1.533l9.924,14.241l-0.141-14.241h1.555V43.988z M420.94,43.988h-1.58V27.344h1.58V43.988z M430.016,43.988h-1.58V28.735h-5.232
v-1.391h12.07v1.391h-5.258V43.988L430.016,43.988z M439.069,27.344v9.903c0,1.814,0.021,3.088,0.801,4.125
c0.564,0.754,1.791,1.58,3.865,1.58c0.59,0,1.393-0.048,2.17-0.354c1.271-0.495,1.934-1.298,2.287-2.759
c0.141-0.565,0.164-1.557,0.164-2.17V27.344h1.578v7.568c0,4.62,0,6.2-1.412,7.732c-1.203,1.297-2.994,1.769-4.738,1.769
c-2.807,0-5.117-1.203-5.896-3.606c-0.398-1.202-0.377-2.122-0.377-5.752v-7.709L439.069,27.344L439.069,27.344z M466.485,43.988
h-1.979l-5.258-7.379h-3.914v7.379h-1.58V27.321h4.668c2.9,0,3.631,0.023,4.668,0.377c2.734,0.966,2.924,3.583,2.924,4.408
c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.226-3.678,1.297L466.485,43.988z M455.334,35.242h3.914
c1.084,0,2.098-0.024,2.805-0.165c1.77-0.354,2.404-1.698,2.404-3.042c0-1.626-0.801-2.853-2.428-3.183
c-0.473-0.094-0.684-0.118-2.781-0.118h-3.914V35.242L455.334,35.242z M480.442,43.988h-11.457V27.344h10.867v1.462h-9.287v5.917
h8.416v1.462h-8.416v6.341h9.877V43.988L480.442,43.988z M285.734,68.648c-1.603,3.536-4.103,4.056-6.177,4.056
c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.935-3.818-1.935-6.412c0-3.535,1.273-8.863,7.119-8.863
c4.479,0,5.707,2.711,6.438,4.313l-1.58,0.825c-0.307-1.367-1.084-2.381-1.768-2.898c-1.108-0.826-2.43-0.851-3.019-0.851
c-1.792,0-3.041,0.521-4.103,1.957c-1.154,1.58-1.438,3.489-1.438,5.28c0,1.131,0.165,3.844,1.392,5.492
c1.32,1.77,3.229,1.957,4.408,1.957c0.801,0,1.744-0.094,2.616-0.707c0.591-0.4,1.509-1.367,1.909-2.828L285.734,68.648z
M300.233,70.536c-1.627,1.908-3.631,2.168-4.998,2.168c-2.051,0-3.748-0.637-5.115-2.264c-1.179-1.367-2.099-3.561-2.099-6.507
c0-4.597,2.265-8.724,7.214-8.724c5.518,0,7.145,4.856,7.12,8.629C302.331,66.385,301.577,68.956,300.233,70.536z M295.235,56.579
c-4.242,0-5.54,4.195-5.54,7.379c0,3.088,1.226,7.332,5.47,7.332c5.14,0,5.492-6.082,5.492-7.427
C300.682,60.846,299.456,56.579,295.235,56.579z M318.315,72.279h-1.557l-9.782-14.381v14.381h-1.533V55.635h1.533l9.925,14.24
l-0.143-14.24h1.557V72.279z M327.393,72.279h-1.58V57.026h-5.232v-1.391h12.069v1.391h-5.257V72.279L327.393,72.279z
M347.643,72.279h-1.979l-5.258-7.379h-3.914v7.379h-1.58V55.612h4.668c2.9,0,3.631,0.023,4.668,0.377
c2.734,0.967,2.924,3.584,2.924,4.408c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.228-3.678,1.297L347.643,72.279z
M336.493,63.534h3.912c1.086,0,2.1-0.023,2.807-0.166c1.768-0.354,2.404-1.697,2.404-3.041c0-1.627-0.803-2.853-2.429-3.183
c-0.472-0.095-0.685-0.118-2.782-0.118h-3.912V63.534L336.493,63.534z M363.204,72.279h-1.722l-1.909-5.021h-7.449l-1.887,5.021
h-1.77l6.791-16.644h1.32L363.204,72.279z M359.102,65.984l-3.206-8.485l-3.254,8.485H359.102z M378.079,68.648
c-1.603,3.536-4.102,4.056-6.177,4.056c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.934-3.818-1.934-6.412
c0-3.535,1.273-8.863,7.12-8.863c4.479,0,5.704,2.711,6.437,4.313l-1.58,0.825c-0.307-1.367-1.084-2.381-1.769-2.898
c-1.108-0.826-2.429-0.851-3.019-0.851c-1.791,0-3.041,0.521-4.103,1.957c-1.153,1.58-1.438,3.489-1.438,5.28
c0,1.131,0.166,3.844,1.392,5.492c1.319,1.77,3.229,1.957,4.407,1.957c0.803,0,1.746-0.094,2.617-0.707
c0.59-0.4,1.51-1.367,1.91-2.828L378.079,68.648z M386.354,72.279h-1.58V57.026h-5.232v-1.391h12.069v1.391h-5.257V72.279
L386.354,72.279z">
<animate
attributeName="fill"
from="transparent"
to="#424A52"
dur="1s"
begin="2s"
fill="freeze" />
<animate
attributeName="stroke-dashoffset"
from="1000"
to="0"
dur="6s"
fill="freeze" />
</path>
</svg>
This results in this warning message in Chrome:
SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
What's the problem in my code?

There's no problem with your code other than Chrome has removed native SMIL support.
Fortunately they also provided a SMIL shim. Drop that in to your page and you get SMIL back again.
IE doesn't support SMIL either but the fakesmile shim can remedy that.

Change all black paths to transparent pixels in Adobe Illustrator 5.1

I'm trying to download some icons from http://game-icons.net/ and I need all black pixels to be transparent. All the techniques I've found on google have not worked, they have only turned them white.
Thanks for your time.

Am I missing something? Assuming you are using the SVG versions, why can't you just select the black rectangle and delete it?
Assuming for the moment you are correct, and perhaps it is some issue with importing the SVG into AI, it is easy enough to do it manually in a text editor.
Here are the contents of the "electric.svg" icon file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m0,0h512v512h-512z"/>
<g transform="matrix(15 0 0 15 -5924 -6649.4327)">
<use width="744.094" height="1052.362" transform="translate(432 440.36218)"/>
</g>
<g fill="#fff" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/
There is a <g> and a <use> in there that are not doing anything, so you could get rid of them if you like.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m0,0h512v512h-512z"/>
<g fill="#fff" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/1/
The first <path> element is the one that is creating the black background, so just delete it. But in order for the lightning symbol (which is currently white) to be visible, we will need to change its colour. We'll use red.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g fill="red" transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)">
<path d="m512,944.3622 32,0 0-52 32,76-32,0 0,52z"/>
</g>
</svg>
http://jsfiddle.net/Hp8dT/2/

Resources