<svg version="1.1" xmlns="http://w3.org/2000/svg">
<title> Background </title>
<text>
<LinearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
<stop style = "stop-color: green;" offset="0"/>
<stop style = "stop-color: white;" offset="1"/>
</LinearGradient>
</text>
<rect style = "fill: url(#g);" width = "100%" height = "100%"/>
</svg>
The output of this code is either broken image, or the Title "Background" and I do not see what's wrong with it.
You've two issues which affect standalone SVG only
the SVG namespace is incorrect so the file is not recognised as an SVG file. You're missing www from the namespace.
standalone SVG files are case sensitive so we need to write linearGradient
And this one is a bug even when you embed SVG in html.
you can't make a linearGradient the child of a <text> tag. We can use <defs> instead. In theory we could omit the <defs> tag, although I think Safari isn't keen on that.
which leaves us with this...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<title> Background </title>
<defs>
<linearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
<stop style = "stop-color: green;" offset="0"/>
<stop style = "stop-color: white;" offset="1"/>
</linearGradient>
</defs>
<rect style = "fill: url(#g);" width = "100%" height = "100%"/>
</svg>
You should use defs for the gradient. You may also consider viewbox and width/height:
<svg version="1.1" xmlns="http://w3.org/2000/svg" viewBox="0 0 200 100" width="200">
<title> Background </title>
<defs>
<LinearGradient id="g" x1="200%" x2="0%" y1="50%" y2="0%">
<stop style = "stop-color: green;" offset="0"/>
<stop style = "stop-color: white;" offset="1"/>
</LinearGradient>
</defs>
<rect fill="url(#g)" x="0" y="0" width="200" height="100" />
</svg>
Related
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>
How to probably display a linear gradient in HTML from a SVG <symbol>? I tried the following but somehow this only works in FireFox (version 63). In chrome and safari it didn't load the gradient. What am I doing wrong is this a bug or is there a "work around" for this?
W3 validation shows no errors for the following code:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Problem</title>
<meta charset="UTF-8" />
</head>
<body style="margin:0;overflow:hidden">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:block">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#AE1C28" />
<stop offset="30%" style="stop-color:#AE1C28" />
<stop offset="40%" style="stop-color:#FFFFFF" />
<stop offset="60%" style="stop-color:#FFFFFF" />
<stop offset="70%" style="stop-color:#21468B" />
<stop offset="100%" style="stop-color:#21468B" />
</linearGradient>
</defs>
<symbol id="logo" viewbox="0 0 100 100" preserveAspectRatio="none">
<rect width="100%" height="100%" x="0" y="0" fill="url(#grad1)" />
</symbol>
</svg>
<svg style="width:100vw;height:100vh">
<use xlink:href="#logo"></use>
</svg>
</body>
</html>
Have a look at this example where I try to deal with all use cases of including a svg symbol via <use>.
Update:
Hmm weird seems like it works in chrome when the SVG is in the HTML. However when the file is in a external file (as shown in the codesandbox example) then the gradients won't show. I guess it is an issue with <use>?
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 :
I've been trying to externalize my SVG icons to a file and referencing them with markup like <svg><use xlink:href="file.svg#icon" /></svg>. In theory this works really nicely, but different browsers have issues with rendering. All the browsers are able to render the svg correctly when referencing the symbol with <use> inside the file and opening the svg file's url directly.
In short, is there a cross-browser way to get SVG linearGradients working as fills for elements when referencing the symbols with <svg><use/></svg> in the markup?
I set up a plunker demonstrating the problem:
http://plnkr.co/edit/feKvZ7?p=preview
Simplified, the markup is like the following:
<!DOCTYPE html>
<html>
<body>
<h1>SVG sprite test</h1>
<svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="icon.svg#icon" />
</svg>
</body>
</html>
And the SVG file looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
</symbol>
<use id="iconuse" xlink:href="#icon" width="100" height="100" />
</svg>
This is what it looks like in the different browsers:
The symbol tag is used to hide the elements that are inside it. Elements inside the symbol are called using the <use> command by their unique indicator.
Therefore, it is better to use this method of calling individual elements rather than calling the whole symbol
In addition, elements when using <use> fall into the shadow DOM and using CSS in some cases becomes impossible
Therefore, it is better to delete all internal styles inside symbol and assign them directly to the use command
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<circle id="circle" cx="50" cy="50" r="40" />
<rect id="rect" x="100" y="10" width="100" height="100" />
</symbol>
<use class="iconuse" xlink:href="#circle" width="100" height="100" fill="url(#gradient)" stroke="black" />
<use class="iconuse" xlink:href="#rect" width="100" height="100" fill="url(#gradient)" />
</svg>
Try next one (it's how Inkscape provide implementation of gradients):
<linearGradient id="gradient">
<stop
style="stop-color:black;"
offset="0"/>
<stop
style="stop-color:white;"
offset="1" />
</linearGradient>
...
<path
style="fill:url(#gradient); ...
I love external stylesheets and want to be able to style any SVG graphics via an external sheet. I can declare single colour stroke and fill for my SVG logo but I want a gradient fill. I've tried a view things but can't get it to work right. Can someone help me figure out how to make it work?
I'm not sure how to put a code snippet considering I'm discussing external code, not inline, so here's a link to the SVG logo in question and its matching external stylesheet.
Actual logo I'm trying to recreate in SVG (PNG):
SVG logo: http://www.cafenocturne.com/testpage/images/svg/CafeLogoSVG.svg
Stylesheet: http://www.cafenocturne.com/testpage/css/CafeLogoSVG.css
There are some commented-out notes to make sure I don't lose the gradient code I'm trying to implement so I apologize that the CSS file is a mess. Once I can get it to work right, I won't need to keep notes there.
So how do I achieve this?
add the gradient to your SVG file, and change the stop-color from CSS:
#color1 {
stop-color: red
}
#color2 {
stop-color: blue
}
<svg>
<linearGradient id="lg">
<stop id="color1" offset="0" />
<stop id="color2" offset="1" />
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" />
</svg>
if you need more control of your gradients, you could specify gradients in a seperate file (say 'myGradients.svg')
<svg xmlns="http://www.w3.org/2000/svg">
<linearGradient id="g1">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
<linearGradient id="g2">
<stop offset="0" stop-color="green"/>
<stop offset="1" stop-color="yellow"/>
</linearGradient>
</svg>
now in your css you can do
.logo {fill: url('myGradients.svg#g2');}
unfortunately this doesn't work in chrome :-(
alternatively you can have a copy of your gradient collection in your logo file or html, and still style it with css
.color1 {
stop-color: green
}
.color2 {
stop-color: yellow
}
#logo1 {
fill: url(#g1)
}
#logo2 {
fill: url(#g2)
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="0" height="0">
<linearGradient id="g1">
<stop offset="0" class="color1" />
<stop offset="1" class="color2" />
</linearGradient>
<radialGradient id="g2">
<stop offset="0" class="color1" />
<stop offset="1" class="color2" />
</radialGradient>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle id="logo1" cx="50" cy="50" r="45" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<circle id="logo2" cx="50" cy="50" r="45" />
</svg>