I'm currently struggling with a SVG.
Right now, I'm trying to display an animated SVG in my webpage. In order to do it, I just put the svg code at the end of the body, and used the html tag "use" to embed my SVG (which contains a symbol).
Here is my SVG code :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient">
<stop offset="0%" stop-color="#7A5FFF">
<animate attributeName="stop-color" values="#05FFA3; #45CAFC; #7873F5; #FC6262; #05FFA3;" dur="10s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#01FF89">
<animate attributeName="stop-color" values="#2096FF; #303F9F; #FF6EC4; #FFD86F; #2096FF;" dur="10s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<symbol x="0px" y="0px" width="308px" height="308px" viewBox="0 0 308 308" id="svg-logo">
<circle cx="150" cy="150" r="150" fill="url(#linearGradient)" />
</symbol>
</svg>
And here is the way I embed it in my page :
<svg class="star">
<use xlink:href="#svg-logo">
</svg>
It works fine, except on safari. The linear gradient animation is completely broken, and looks like this :
Related
i want to use this animated as background. Svg fill animation is need to animate this svg image,
but, i can't understood that.
image link i want
<svg class="translate-y-[25%] translate-x-1/3 transform-gpu lg:w-[725px] 2xl:h-[940px] 2xl:w-[979px]" viewBox="0 0 979 940" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M916.44 542.73C916.44 759.742 1221.12 893.447 485.73 935.665C-249.656 977.884 73.651 701.676 55.0199 542.73C36.3888 383.785 210.098 445.489 210.098 316.311C210.098 187.134 286.044 270.936 393.995 193.072C501.947 115.207 360.243 108.245 679.166 13.9659C998.088 -80.3132 916.44 325.718 916.44 542.73Z" fill="url(#paint0_radial_2978_41613)"></path>
<defs>
<radialGradient id="paint0_radial_2978_41613" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(754.239 148.024) rotate(129.699) scale(1296.28 1230.91)">
<stop stop-color="#42ADDB"></stop>
<stop offset="1" stop-color="#9AFAFA"></stop>
</radialGradient>
</defs>
</svg>
I am trying to combine all svg icons into one sprite file like this for organization, caching and other purposes. But for some reason, linearGradient is not being applied
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
Now, in file preview I can see circle with applied gradient correctly
When I try to import it into my HTML like this
<svg>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
the circle is not being colored with defined gradient
When I moved <linearGradient> out of svg file, it worked, but why?
<svg>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
<use href="#toggle" xlink:href="#toggle"></use>
</svg>
Even tho it worked, the problem is, that this kills the purpose of keeping all the icons in one file if some styling can only be defined from the outside. Displaying same icon will force me defining same gradient multiple times. Would love to have everything in the same file. Any ideas or insights?
P.S. importing as <img> displays the circle gradient correctly.
Pretty sure, you have hidden your main svg asset file by display:none.
If you change this to visibility:hidden it should work:
function unhide(){
document.querySelector('.dsp-non').classList.remove('dsp-non');
}
.svgAssetHidden{
visibility:hidden;
position:absolute;
width:0px;
height:0px;
overflow:hidden;
}
.svgIcon{
display:inline-block;
width:10em;
}
.dsp-non{
display:none;
}
<button onclick="unhide()">remove display:none</button>
<h3>visibility:hidden</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle" href="#toggle"></use>
</svg>
<h3>display:none</h3>
<svg class="svgIcon" viewBox="0 0 50 20">
<use href="#toggle2" href="#toggle"></use>
</svg>
<svg class="svgAssetHidden" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C8C8B"/>
</linearGradient>
</defs>
</g>
</svg>
<svg class="svgAssetDspNon dsp-non" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<!-- other icons -->
<!-- ... -->
<g id="toggle2">
<path d="M4,7.992c-2.206,0-4-1.794-4-4c0-2.206,1.794-4,4-4h10c2.206,0,4,1.794,4,4c0,2.206-1.794,4-4,4H4z"/>
<circle fill="url('#toggle-linear-gradient2')" cx="14" cy="3.992" r="3"/>
<defs>
<linearGradient id="toggle-linear-gradient2" gradientUnits="userSpaceOnUse" x1="14" y1="0.9922" x2="14" y2="6.9922">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#8C0000"/>
</linearGradient>
</defs>
</g>
</svg>
Hiding a svg by display:none will also break some other features like filters.
I have seen #adamwathan's live streams & he does className="w-5 h-5 text-white" fill="currentColor" to style an SVG through Tailwind.
How can I do the same for linearGradient?
I have the following SVG:
import React from 'react'
export const LinearGradient = () => (
<svg className="w-5 h-5" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
<stop offset="0%" />
<stop stopOpacity="0" offset="100%" />
</linearGradient>
</defs>
<circle
className="text-white"
stroke="currentColor"
fill="url(#a)"
cx="8.5"
cy="8.5"
r="6"
fillRule="evenodd"
fillOpacity=".8"
/>
</svg>
)
How do I style linearGradient in SVG that uses fill="url(#a)" perfectly? I can't change fill="currentColor" as it will lose reference to id="a".
The original SVG is at https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg
Any solutions?
You can also create variables from your tailwind.config.js that you can use in your SVG.
Here is an example of how to do it inside a Laravel 8 project.
tailwind.config.js
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
colors: {
blue: {
300: colors.blue[300],
500: colors.blue[500],
},
...
resources/css/variables.css
:root {
--color-blue-300: theme('colors.blue.300');
--color-blue-500: theme('colors.blue.500');
}
resources/css/app.css
#import './variables.css';
#import 'tailwindcss/base';
...
resources/views/svg/my-svg.blade.php
...
<defs>
<linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:var(--color-blue-300);" />
<stop offset="100%" style="stop-color:var(--color-blue-500);" />
</linearGradient>
</defs>
...
<path style="fill: url(#grad1);" ...
Then, i'm using in another view (ex: my-layout.blade.php) #include("svg.my-svg").
Using this instead of <img src="my-svg.svg"... allow tailwind's classes to impact the svg.
If you really want to use <img>, a concept is to use controller to build your svg and return a view with response(..., 200)->header('Content-Type', 'image/svg+xml');. I did something like that where i set the color in the url <img src="my-svg.svg?fill=blue-500"... (and it work successfully with tinyMCE 6 which disallow the usage of svg)
To style the linearGradient colors you can use the stop-color attribute on the <stop> elements.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<svg class="w-32 h-32 text-blue-500" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
<stop offset="0%" stop-color="currentColor" />
<stop stop-opacity="0" offset="100%" stop-color="white" />
</linearGradient>
</defs>
<circle stroke="currentColor" fill="url(#a)" cx="8.5" cy="8.5" r="6" fill-rule="evenodd" fill-opacity=".8" />
</svg>
Hi I've been looking at source code that implements a colour gradient on a quick example SVG that I made within Adobe Illustrator. For some reason I can't seem to work out how to get it to work such that the section "st0" are affected by the gradient named "logo-gradient".
Any help?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="enable-background:new 0 0 47.4 47.7;" xml:space="preserve" width="50" height="50">
<defs>
<linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >
<stop offset="0%" stop-color="#7A5FFF">
<animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" stop-color="#01FF89">
<animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<style type="text/css">
.st0{fill:"url('#logo-gradient')"}
</style>
<g id="Layer_2">
<rect x="-11.8" y="-9" width="66" height="63"/>
</g>
<g id="Layer_1">
<g>
<g>
<path d="M12.1,30.4v1c0,8.1,3.9,11.9,8.7,11.9c3.9,0,7.3-1.8,9.4-6.6h0.1c-1.4,7.4-5.8,11-12.5,11c-7,0-13.6-4.6-13.6-15.1
c0-11.4,7.1-15.6,13.9-15.6c6.1,0,12.2,3.2,12.2,11.8c0,0.5-0.1,1-0.1,1.5H12.1z M12.1,29.3h10.8c0.1-0.5,0.1-0.9,0.1-1.2
c0-6.9-1.6-10.1-5-10.1C14.4,18,12.4,21.9,12.1,29.3z"/>
<path d="M44.1,43.2c0,0.7,0.1,0.8,0.7,1.3l3.6,2.6v0.1h-16v-0.1l3.6-2.6c0.5-0.4,0.6-0.7,0.6-1.3V8.8c0-0.8-0.1-1-0.6-1.4
l-3.6-2.6V4.7l11.8-1.4V43.2z"/>
</g>
<g>
<path class="st0" d="M12.1,30.4v1c0,8.1,3.9,11.9,8.7,11.9c3.9,0,7.3-1.8,9.4-6.6h0.1c-1.4,7.4-5.8,11-12.5,11
c-7,0-13.6-4.6-13.6-15.1c0-11.4,7.1-15.6,13.9-15.6c6.1,0,12.2,3.2,12.2,11.8c0,0.5-0.1,1-0.1,1.5H12.1z M12.1,29.3h10.8
c0.1-0.5,0.1-0.9,0.1-1.2c0-6.9-1.6-10.1-5-10.1C14.4,18,12.4,21.9,12.1,29.3z"/>
<path class="st0" d="M44.1,43.2c0,0.7,0.1,0.8,0.7,1.3l3.6,2.6v0.1h-16v-0.1l3.6-2.6c0.5-0.4,0.6-0.7,0.6-1.3V8.8
c0-0.8-0.1-1-0.6-1.4l-3.6-2.6V4.7l11.8-1.4V43.2z"/>
</g>
</g>
</g>
</svg>
I am using SVG shape with linear gradient color via
background: url(#{$imgUrlBase}/element.svg);
Works just fine everywhere, except for Edge and IE, where the shape appears correctly, but instead of gradient, there is only solid color.
For multiple reasons (simple use of png fallback) I would like to use this way of implementation. I did not find any not of limitation of this usage regarding Edge.
This is element.svg
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 308 308" style="enable-background:new 0 0 308 308;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<g id="Page-1">
<defs>
<linearGradient id="s" gradientUnits="userSpaceOnUse" x1="-483.7941" y1="514.2445" x2="-484.1468" y2="514.5996" gradientTransform="matrix(620 0 0 -620 300215 319095)">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#00FF00"/>
</linearGradient>
</defs>
<path id="shape" class="st0" d="..."/>
</g>
</svg>
Any idea how to make SVG with linear background work as a background image in Edge and IE 11?
There is something about that SVG that IE doesn't like. I think it may be the odd gradientTransform that's in there.
https://jsfiddle.net/efgtu2pj/
If you get rid of it and update the gradient coordinates to compensate, it renders fine.
<svg version="1.1" id="l" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 308 308">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<g id="Page-1">
<defs>
<linearGradient id="s" gradientUnits="userSpaceOnUse" x1="308" y1="308" x2="-50" y2="0">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#00FF00"/>
</linearGradient>
</defs>
<path id="shape" class="st0" d="M154,0,308,308,0,308"/>
</g>
</svg>
Note that the coords I have used aren't exactly equivalent. I have just chosen values that look to give approximately the same results as the original.
Here is an example of an SVG with a gradient that I exported out of illustrator, and then edited the SVG code to remove gradientTransform, and replaced x1, y1, x2, y2 values so that it works in internet explorer and edge:
Illustrator export:
<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="40px" height="150px" viewBox="0 0 40 150" enable-background="new 0 0 40 150" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1023.5181" y1="4587.5352" x2="-1023.2139" y2="4587.5352" gradientTransform="matrix(0 492.7101 -492.7101 0 2260344.5 504297.75)">
<stop offset="0" style="stop-color:#FFCC07"/>
<stop offset="0.5111" style="stop-color:#346966"/>
<stop offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.81,143.313c0.349-0.071,0.677-0.258,0.907-0.564l10.981-14.513c0.504-0.667,0.371-1.625-0.296-2.13
c-0.666-0.504-1.625-0.372-2.13,0.295l-8.354,11.042v-31.681c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
L9.674,127.03c-0.541-0.638-1.506-0.717-2.144-0.176c-0.638,0.541-0.716,1.505-0.176,2.143l11.773,13.878
C19.551,143.373,20.229,143.525,20.81,143.313"/>
</svg>
My edited code:
<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="40px" height="150px" viewBox="0 0 40 150">
<style type="text/css">
.st0{fill:url(#s);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="40" y2="150" >
<stop offset="0" style="stop-color:#FFCC07"/>
<stop offset="0.5111" style="stop-color:#346966"/>
<stop offset="1" style="stop-color:#51538C"/>
</linearGradient>
<rect fill="url(#SVGID_1_)" width="40" height="150"/>
<path fill="#FFFFFF" d="M20.811,143.313c0.349-0.07,0.676-0.258,0.906-0.563l10.981-14.513c0.504-0.668,0.37-1.625-0.296-2.131
c-0.666-0.504-1.625-0.371-2.131,0.295l-8.354,11.043v-31.682c0-0.835-0.684-1.52-1.521-1.52c-0.835,0-1.52,0.685-1.52,1.52v32.117
L9.674,127.03c-0.541-0.638-1.506-0.718-2.144-0.177c-0.638,0.541-0.716,1.506-0.176,2.144l11.773,13.878
C19.551,143.373,20.229,143.525,20.811,143.313"/>
</svg>
This image shows the differences:
file diff screenshot