<div class="svg-background"></div>
<svg id="svg-source" viewBox="0 0 24 16" fill="none">
<path d="M23.8475 7.18155C23.6331 6.88825 18.5245 0 11.9999 0C5.4753 0 0.36647 6.88826 0.152297 7.18127C-0.0507658 7.45952 -0.0507658 7.83691 0.152297 8.11517C0.36647 8.40846 5.4753 15.2967 11.9999 15.2967C18.5245 15.2967 23.6331 8.40842 23.8475 8.1154C24.0508 7.8372 24.0508 7.45952 23.8475 7.18155ZM11.9999 13.7143C7.19383 13.7143 3.03127 9.14243 1.79907 7.64782C3.02968 6.15189 7.18352 1.58241 11.9999 1.58241C16.8057 1.58241 20.968 6.15349 22.2007 7.6489C20.9701 9.14478 16.8163 13.7143 11.9999 13.7143Z" fill="#073255"/>
</svg>
<style>
.svg-background {
height: 2em;
width: 2em;
background-image: url(#svg-source);
}
</style>
I've tried with # sign - but no result.
I want to use built-in SVG file as background pattern.
I need to achieve 2 purposes
Avoid duplication SVG element on the page
Avoid having external SVG image.
Any ideas?
I want to create a responsive navbar using Tailwind CSS and followed this guide
https://youtu.be/ZT5vwF6Ooig?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&t=74
Unfortunately there is no link for the SVG path so all I have is
<button>
<svg class="h-6 w-6 text-gray-700 fill-current" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="... the missing svg path ..." />
</svg>
</button>
So I tried to do it on my own with an external svg. For testing purposes I'm using this svg
https://www.iconfinder.com/icons/3324998/menu_icon
Due to the fact the svg has no src tag I decided to embed it within an img tag. I currently have
img {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMyIgeDI9IjIxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxOCIgeTI9IjE4Ii8+PC9zdmc+");
}
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<button>
<img class="h-6 w-6 text-red-700" />
</button>
I would expect the image to be red but it remains black. How can I fix the color for it? Further I'm not sure if more attributes are required. Maybe I don't have to embed it within an image tag and other solutions fit better?
Thanks in advance
I think that you can't modify an image color from CSS.
Instead of using an img tag, try to do something like that, so that you easily can change the jmenu color:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 35px;
height: 5px;
background-color: red; /* Here you can change your background color */
margin: 6px 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
I hope this code can solve your problem.
EDIT:
I also found a nice solution to your problem in this post:
Here you can see a demo that just uses CSS filter.
.filter-red{
filter: invert(47%) sepia(98%) saturate(7304%) hue-rotate(352deg) brightness(108%) contrast(130%);
}
<img src="https://cdn4.iconfinder.com/data/icons/feather/24/menu-512.png" class="filter-red">
You can also change the fill of an SVG using tailwind, using the fill-current class and then color it like any regular text, like this:
<svg class="w-4 h-4 fill-current text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
</svg>
As you can see, the height and width of the SVG can also be set.
I am loading .svg files with stacked images, to optimize loading time and keep vector graphics crisp. I am using one file for my icons & one for my logos variations.
Problem
Some of the graphics that I want to render are in my header or above the fold and are loading slow or loading after other page elements. I would like to load it as fast as when I was using a PNGs.
If possible I would like to avoid adding the SVG code directly into HTML as the graphics are being used site wide.
HTML (Pages are PHP)
<object data="images/charactir-logos.svg#charactir-logo-creative"
type="image/svg+xml" alt=""></object>
I tried using the following to speed up rendering; without noticeable difference:
<link rel="preload" href="images/charactir-logos.svg"
as="image" type="image/svg+xml">
SVG Files
<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 300" enable-background="new 0 0 250 300"
xml:space="preserve">
<style type="text/css">
rect, line { shape-rendering: crispEdges; }
svg .icon { visibility: hidden }
svg .icon:target { visibility: visible }
</style>
... following is duplicated for each graphic entry
<svg viewBox="0 0 250 300">
<g id="charactir-logo-creative" class="icon">
... path data here
</g>
</svg>
... end of entry
</svg>
The individual items in the .svg stack are hidden and retrieved using:
svg .icon { visibility: hidden }
svg .icon:target { visibility: visible }
I had used display: none & display: inline before this, without a significant effect.
I don't know why this is happening. Ideally, I would like the svg to be displayed over the text on all browsers, but Chrome is not making this happen. This is how it looks like on Firefox:
And this is how it looks like on Chrome:
As you can tell, the svg is on the text. I don't know if it's the margin or the svg but I would like to understand how I can fix this.
Here is my CSS:
svg{
display:block;
}
#rect{
margin-top:-150px; /*helps svg display over text on Firefox. Nothing happens on Chrome*/
margin-left:200px;
height:500px;
}
And this is the SVG code:
<div class="circle-border">
<div class="svg">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="rect" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 960 560" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:white;stroke-miterlimit:10;}
</style>
<polygon class="st0" points="224.5,150.5 224.5,477.5 649.5,477.5 649.5,444.5 682.5,444.5 682.5,412.5 715.5,412.5 715.5,379.5
748.5,379.5 748.5,346.5 780.5,346.5 780.5,150.5 "/>
</svg>
</div><!--border-->
Feel free to let me know if you need additional information.
I have a webpage where I will repeat the logo of my company several times - one time in big size, white logo ; one time in small size, white logo ; one time in small size, orange logo.
For now I'm using JPG files - all good with 3 JPGs.
But I wonder whether I can use SVG for this use case, ideally without duplicating the SVG code within the page.
Would you have any clue?
Thanks,
Nicolas
Maybe this can serve as an inspiration for you: I'm embedding a bogus logo inside the HTML and using CSS to scale and color it differently. This is the HTML:
<h1>my page</h1>
<div class="big logo" title="big logo">
<svg id="logo" viewBox="0 0 50 50">
<rect x="1" y="1" stroke-width="2" width="48" height="48"/>
<circle cx="25" cy="25" r="23" fill="currentColor"/>
</svg>
</div>
<div>some text on my page and a small logo</div>
<div class="logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
<div>some more text on my page and a differently colored logo</div>
<div class="yellow logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
And the CSS:
.logo > svg {
fill:green;
stroke:blue;
color:red;
height:75px;
width:75px;
}
.big.logo > svg {
height:200px;
width:200px;
}
.yellow.logo > svg {
fill:yellow;
color:orange;
stroke:black;
}
See example on jsFiddle. Unfortunately, this only seems to work with Firefox and Chrome. Neither Opera nor Internet Explorer seem to like this (also not the new versions 9 and 10). Didn't try Safari.
So, I guess, unless you want to restrict the viewers to Webkit and Firefox browsers or use JavaScript to duplicate the SVG and modify certain attributes of the different instances, you're better off with either three different JPEG files (PNG would be better), or two different SVG files (in two different colors -- you can obviously rescale without problems).
If you don't need to use the image as a CSS background, then it's possible to use the SVG Stacks technique to do this.
Here's an example, a single svg file that contains several different icons, where the size of the image also decides how the svg looks.
Here's a part of that svg file to illustrate:
<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
svg .icon { display: none }
svg .icon:target { display: inline }
/* media-queries can control the appearance too */
#hours {
fill:none;
stroke:#850508;
stroke-dasharray:1,5.28;
stroke-dashoffset:0.5;
stroke-width: 1.5px;
}
#media screen and (max-width: 128px) {
#hours {
stroke-dasharray:1, 17.84;
stroke-width: 2px;
}
}
#media screen and (max-width: 64px) {
#hours {
stroke-dasharray: none;
}
}
/* shared styles */
.icon * { fill: #850508; }
</style>
</defs>
<svg viewBox="0 0 32 32">
<g id="clock" class="icon">
<path d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4 M16,0 C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0L16,0z"/>
<path d="M21.422,18.578L18,15.152V8h-4.023v7.992c0,0.602,0.277,1.121,0.695,1.492l3.922,3.922
L21.422,18.578z"/>
<path id="hours" d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4"/>
</g>
</svg>
<svg viewBox="0 0 32 32">
<g id="star" class="icon">
<polygon points="22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32"/>
</g>
</svg>
</svg>
Each icon can have a unique look with different colors, gradients etc (in my example all the icons share the same fill, but they don't have to do that).