This is my path tag size (g tag is same size)
And this is my SVG tag size
There is space between them
These are the inline attributes...
<svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 64 64">
<g>
<path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z">
</path>
</g>
</svg>
This is css for svg
{
width: 1.8rem;
height: 1.8rem;
}
I am trying to figure out why this space exists.
https://codepen.io/colton123/pen/qBEGwLL
Two things: Your icon is not a perfect square, and there is a gap in the icon itself on the right side.
First, with the <svg> set to 1.8rem (32px in CodePen) the <g> is 30x27px. If you changed the height and width of <svg> to 3rem (48px in CodePen) the <g> would be 45x40.5px. Since you are forcing <svg> into a square, there will be a gap.
Second, the width of <g> should match the width of <svg>, but it is always 93.75% of the width. This means there is a 6.25% gap in the icon itself.
Hello please see this and solve your issue of SVG. Thanks
svg {
width: 2rem;
height: auto;
}
<svg class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 62 56"><g><path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z"></path></g></svg>
Your should be viewBox="0 0 62 54" instead of viewBox="0 0 62 62"
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.
Currently, I have a html site where I am inserting SVG pictures via the tags and the code of svg file itself. It works, but the code is not quite pretty. Instead, I would like to load such picture in my css file where I have class for this type if icons called 'icon-no-background'. This class styles each icon in the same way. Beneath this class I would like to add a subclass that would load each product's icon.
Code of my class:
.icon-no-background {
position: absolute;
top: 0;
left: 0;
color: #aaabb6;
width: 1.28rem;
height: 1.28rem;
.icon-product1 {
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22.7px" height="17.6px" viewBox="0 0 22.7 17.6" style="enable-background:new 0 0 22.7 17.6;" xml:space="preserve">
<path stroke="currentColor" stroke-width="0.4" class="st0" d="some svg code here"></path>
</svg>
}
}
Then I would simply call this class from my html and it should display the correct picture. It does not work however. What do I do wrong? I've been trying to use even 'url' attribute to load the svg file but with no success.
Any idea?
Thanks,
David
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 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).