SVG icon destroys the color of the following SVG icon

Question

On my website I use the icons of Instagram and Telegram as inline SVG images. If I do so, the color of the Telegram icon is destroyed. If I remove the Instagram icon the color is fine. How can I display both icons in the right color?

A JSFiddle example could be found here:

https://jsfiddle.net/0oLt4dyw/

And the original code is here:

<!-- Instagram -->
<svg width="100" height="100" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="b"><stop offset="0" stop-color="#3771c8"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#f55"/><stop offset="1" stop-color="#c837ab"/></linearGradient><radialGradient cx="158.429" cy="583.076" r="65" fx="158.429" fy="583.076" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.53846 1.53846 0 -852.112 836.813)"/><radialGradient cx="149.929" cy="453.076" r="65" fx="149.929" fy="453.076" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 1 -1.38462 0 657.265 303.148)"/></defs><g transform="translate(.07 -453.076)"><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#c)"/><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#d)"/><path d="M44.93 470.076c-15.513 0-28 12.488-28 28v40c0 15.512 12.487 28 28 28h40c15.51 0 28-12.488 28-28v-40c0-15.512-12.49-28-28-28h-40zm-1 9h42c9.97 0 18 8.028 18 18v42c0 9.972-8.03 18-18 18h-42c-9.973 0-18-8.028-18-18v-42c0-9.972 8.027-18 18-18zm46.5 8c-3.04 0-5.5 2.463-5.5 5.5 0 3.038 2.46 5.5 5.5 5.5 3.036 0 5.5-2.462 5.5-5.5 0-3.037-2.464-5.5-5.5-5.5zm-25.5 6c-13.81 0-25 11.193-25 25 0 13.808 11.19 25 25 25 13.806 0 25-11.192 25-25 0-13.807-11.194-25-25-25zm0 9c8.835 0 16 7.164 16 16 0 8.837-7.165 16-16 16-8.838 0-16-7.163-16-16 0-8.836 7.162-16 16-16z" fill="#fff"/></g></svg>

<!-- Telegram -->
<svg width="50" heigth="50" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="a" x1=".667" x2=".417" y1=".167" y2=".75"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient><linearGradient id="b" x1=".66" x2=".851" y1=".437" y2=".802"><stop offset="0" stop-color="#eff7fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><circle cx="120" cy="120" r="120" fill="url(#a)"/><path fill="#c8daea" d="M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80"/><path fill="#a9c9dd" d="M98 175c3 0 4.325-1.372 6-3l16-15.558-19.958-12.035"/><path fill="url(#b)" d="M100.04 144.41l48.36 35.729c5.519 3.045 9.501 1.468 10.876-5.123l19.685-92.763c2.015-8.08-3.08-11.746-8.36-9.349l-115.59 44.571c-7.89 3.165-7.843 7.567-1.438 9.528l29.663 9.259 68.673-43.325c3.242-1.966 6.218-.91 3.776 1.258"/></svg>

Answer 1

You are using id to set the colors with url(#a) and url(#b), but you aren't setting a unique id

Current:

<!-- Instagram -->
<svg width="100" height="100" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="b"><stop offset="0" stop-color="#3771c8"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#f55"/><stop offset="1" stop-color="#c837ab"/></linearGradient><radialGradient cx="158.429" cy="583.076" r="65" fx="158.429" fy="583.076" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.53846 1.53846 0 -852.112 836.813)"/><radialGradient cx="149.929" cy="453.076" r="65" fx="149.929" fy="453.076" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 1 -1.38462 0 657.265 303.148)"/></defs><g transform="translate(.07 -453.076)"><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#c)"/><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#d)"/><path d="M44.93 470.076c-15.513 0-28 12.488-28 28v40c0 15.512 12.487 28 28 28h40c15.51 0 28-12.488 28-28v-40c0-15.512-12.49-28-28-28h-40zm-1 9h42c9.97 0 18 8.028 18 18v42c0 9.972-8.03 18-18 18h-42c-9.973 0-18-8.028-18-18v-42c0-9.972 8.027-18 18-18zm46.5 8c-3.04 0-5.5 2.463-5.5 5.5 0 3.038 2.46 5.5 5.5 5.5 3.036 0 5.5-2.462 5.5-5.5 0-3.037-2.464-5.5-5.5-5.5zm-25.5 6c-13.81 0-25 11.193-25 25 0 13.808 11.19 25 25 25 13.806 0 25-11.192 25-25 0-13.807-11.194-25-25-25zm0 9c8.835 0 16 7.164 16 16 0 8.837-7.165 16-16 16-8.838 0-16-7.163-16-16 0-8.836 7.162-16 16-16z" fill="#fff"/></g></svg>

<!-- Telegram -->
<svg width="50" heigth="50" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="ab" x1=".667" x2=".417" y1=".167" y2=".75"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient><linearGradient id="bc" x1=".66" x2=".851" y1=".437" y2=".802"><stop offset="0" stop-color="#eff7fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><circle cx="120" cy="120" r="120" fill="url(#a)"/><path fill="#c8daea" d="M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80"/><path fill="#a9c9dd" d="M98 175c3 0 4.325-1.372 6-3l16-15.558-19.958-12.035"/><path fill="url(#b)" d="M100.04 144.41l48.36 35.729c5.519 3.045 9.501 1.468 10.876-5.123l19.685-92.763c2.015-8.08-3.08-11.746-8.36-9.349l-115.59 44.571c-7.89 3.165-7.843 7.567-1.438 9.528l29.663 9.259 68.673-43.325c3.242-1.966 6.218-.91 3.776 1.258"/></svg>

Fixed:

<!-- Instagram -->
<svg width="100" height="100" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="b"><stop offset="0" stop-color="#3771c8"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#f55"/><stop offset="1" stop-color="#c837ab"/></linearGradient><radialGradient cx="158.429" cy="583.076" r="65" fx="158.429" fy="583.076" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.53846 1.53846 0 -852.112 836.813)"/><radialGradient cx="149.929" cy="453.076" r="65" fx="149.929" fy="453.076" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 1 -1.38462 0 657.265 303.148)"/></defs><g transform="translate(.07 -453.076)"><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#c)"/><rect width="130" height="130" ry="30" x="-.071" y="453.076" fill="url(#d)"/><path d="M44.93 470.076c-15.513 0-28 12.488-28 28v40c0 15.512 12.487 28 28 28h40c15.51 0 28-12.488 28-28v-40c0-15.512-12.49-28-28-28h-40zm-1 9h42c9.97 0 18 8.028 18 18v42c0 9.972-8.03 18-18 18h-42c-9.973 0-18-8.028-18-18v-42c0-9.972 8.027-18 18-18zm46.5 8c-3.04 0-5.5 2.463-5.5 5.5 0 3.038 2.46 5.5 5.5 5.5 3.036 0 5.5-2.462 5.5-5.5 0-3.037-2.464-5.5-5.5-5.5zm-25.5 6c-13.81 0-25 11.193-25 25 0 13.808 11.19 25 25 25 13.806 0 25-11.192 25-25 0-13.807-11.194-25-25-25zm0 9c8.835 0 16 7.164 16 16 0 8.837-7.165 16-16 16-8.838 0-16-7.163-16-16 0-8.836 7.162-16 16-16z" fill="#fff"/></g></svg>

<!-- Telegram -->
<svg width="50" heigth="50" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="e" x1=".667" x2=".417" y1=".167" y2=".75"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient><linearGradient id="f" x1=".66" x2=".851" y1=".437" y2=".802"><stop offset="0" stop-color="#eff7fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><circle cx="120" cy="120" r="120" fill="url(#e)"/><path fill="#c8daea" d="M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80"/><path fill="#a9c9dd" d="M98 175c3 0 4.325-1.372 6-3l16-15.558-19.958-12.035"/><path fill="url(#f)" d="M100.04 144.41l48.36 35.729c5.519 3.045 9.501 1.468 10.876-5.123l19.685-92.763c2.015-8.08-3.08-11.746-8.36-9.349l-115.59 44.571c-7.89 3.165-7.843 7.567-1.438 9.528l29.663 9.259 68.673-43.325c3.242-1.966 6.218-.91 3.776 1.258"/></svg>

In the Telergram SVG, I changed <linearGradient id="a" x1=".667" x2=".417" y1=".167" y2=".75"><stop offset="0" stop-color="#37aee2"/> to <linearGradient id="e" x1=".667" x2=".417" y1=".167" y2=".75"><stop offset="0" stop-color="#37aee2"/>. Note the id=. Same situation with <linearGradient id="b" x1=".66" x2=".851" y1=".437" y2=".802"><stop offset="0" stop-color="#eff7fc"/><stop offset="1" stop-color="#fff"/> I changed id="b" to id="f".

I think once a color ID is set, it can't be changed. If you look at the errors in the JSFiddle, it says you need to use a unique id.

Answer 2

If someone else facing the issue. And does not have an id. Check for the class of particular functionality and rename it.(Make sure to update the same through out the svg code)