Here is my relevant HML with SVG:
<div style="width:24px;height:24px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 0 24 24">
<path fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
It renders fine but leaves padding above and below the arrow inside the div.
I tried using SVG as background to the div after base64 encoding the SVG tag, as in:
<div style="width:24px; height:24px;margin:0px;padding:0px;background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZWQiIHRyYW5zZm9ybT0ic2NhbGUoMSwxKSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOXY3aC0xNXY0aDE1djd6Ii8+PC9zdmc+');">
</div>
It displays nothing!
Yes there are similar questions asked but this is NOT a duplicate. Nothing in the answers posted to similar questions on SO resolve this problem.
I'm not very sure I understand your question. Maybe this is what you need:
I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())
The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new viewBox
viewBox = bb.x bb.y bb.width bb.height
Where bb is the bounding box.
<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 3 24 18">
<path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
The fill needs to be on the path instead of the svg element.
Also, try adding the width="24" and height="24" to the svg element.
Related
I'm currently working on a landing page with TailwindCSS, and I'd like to add a decorative item under my headlines. I've created an SVG and used the after pseudo-element to position it under the item I want. Here's an example:
<span after:h-5 after:bg-[url('../public/svg/underline-large.svg')] after:bg-no-repeat />
However, the issue here is that I end up having to bring in longer and shorter SVGs for different headlines. Ideally I would be able to use one SVG and somehow stretch it to match the width of the title. Any idea of how to do this?
You will need some more (after:) options and a relative class, but the most important part to add this preserveAspectRatio="none" attribute to the svg.
HTML
<h1
class="text-2xl
relative
after:content-['']
after:h-[1rem]
after:w-full
after:absolute
after:bottom-[-1.2rem]
after:left-[0]
after:bg-[url('./underline.svg')]
after:bg-no-repeat"
>
Short Title
</h1>
SVG
<svg preserveAspectRatio="none" viewBox="0 0 63 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.47663 1.41505C21.2121 3.69552 49.2623 6.09008 61.691 1.41505C52.455 5.86203 35.6249 8.49799 1.14368 4.49373" stroke="#2AADD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I'm having trouble trying to place a clickable link within my SVG image. I've read a few articles but I still cannot seem to get the hang of it, I would greatly appreciate if anyone could guide me on what I may be doing wrong & how I can resolve the issue with my code, Thank you. I'll add a snippet below:
<div class="apps">
<svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
</div>
Links can be placed inside an svg element by use of the xlink namespace, see https://www.w3.org/wiki/SVG_Links.
For the example in the question you could use something like this,
<div class="apps">
<svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://localhost">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
</a>
</svg>
</div>
By placing a reference to the xlink namespace in the svg element (xmlns:xlink="http://www.w3.org/1999/xlink") we can use an anchor element like <a xlink:href="...">...</a> around whatever part of the svg image we wish to make clickable.
In this case only the paths are clickable, not the entire svg viewbox as would be the case if we wrapped the whole <svg>...</svg> in a standard html anchor element.
there's no need to add link to svg
just enclose them inside anchor tag
<a href="somelink.com">
<svg></svg>
</a>
Can we do this?
Use SYMBOL CSS SVG Fragment USE in CSS as background: url or similar?
It seems to me, all other things being equal, SYMBOL use does not work, where G with separate viewbox works. If this cannot be done, why? Is there a better way to do SVG Spritesheets?
SYMBOL has an ID, has a viewBox..am I doing somthing wrong or using symbol inc. viewbox, VS, separate viewbox & g = Does Not Work? oO
Am I doing somthing wrong, or, does the below CSS SVG fragment usage only work with the separate viewbox and G (and not work with symbol with viewbox)?
SYMBOL SVG
<symbol xmlns="http://www.w3.org/2000/svg" transform="rotate(360)" viewBox="0 0 24 24" id="basket">
<path fill="none" stroke="#626262" stroke-width="2" d="M2 12h20l-2 11H4L2 12zm18-4l-6-7M4 8l6-7M1 8h22v4H1V8zm7 7v5m8-5v5m-4-5v5"></path>
<path fill="rgba(0, 0, 0, 0)" d="M0 0h24v24H0z"></path>
</symbol>
..VS..
G & VIEWBOX SVG
<view id="icon-clock-view" viewBox="0 0 32 32" />
<g id="icon-clock">
<path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
</g>
CSS
.icon-clock {background: url(https://example.com/svg-defs.svg#icon-clock-view) no-repeat;}
.basket {background: url(https://example.com/svg-defs.svg#basket) no-repeat;}
This seems to works great. Using 'name' as example to follow.
Wrap <path>(s) & </path> within <symbol> </symbol> I did not use <g>
Add id="name" to <symbol> e.g. <symbol id="name">
Outside the symbol tags, add a <view> and a <use>. The URL, where the complete file is uploaded to, and view ID will become your SVG Fragment.
<view id="icon-name-view" viewBox="0 1240 16 16" />
<use xlink:href="#icon-name" width="16" height="16" x="0" y="1240" id="name"></use>
Change the viewbox to locate the SVG in the spritesheet, here I'd used Y axis, this particular SVG is located at Y axis 1240. Save the SVG Spritesheet to say, svg-defs.svg.
In your CSS use the SVG spritesheet URL with the Fragment Ident e.g.
background: url(https://example.com/svg/svg-defs.svg#icon-name-view) no-repeat;
To change colours I was using filter, e.g.
filter: invert(80%) sepia(21%) saturate(872%) hue-rotate(44deg) brightness(84%) contrast(91%);
Positioning can be done with the ViewBox's but I also used transform, translate.
transform: translateY (10px);
Hope you find this useful, I hope to write a complete guide and will link it when I do. Thank you.
I'm working on a project that uses svg. I generate this svg code thanks to an ocaml library:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" version="1.1" width="161.8mm" height="100mm" viewBox="0 0 161.8 100" color-profile="auto" color-interpolation="linearRGB" color-interpolation-filters="linearRGB">
<g fill="none" stroke-miterlimit="9.98123" transform="matrix(100 0 0 -100 -0 100)">
<defs>
<path id="i1" d="M0 0L1.618 0L1.618 1L0 1Z"/>
</defs>
<use l:href="#i1" fill="#50C878"/>
</g>
</svg>
When I use gthumb or GIMP to display the svg, it prints the correct green square. However, when I include this block of code in Chromium or Firefox, the block appears in the html tree but nothing is display. This is the first time I use svg: after several researches on Google, I can't find anything....
Does someone know why it doesn't work ?
Edit
Solve with the answer:
<use xlink:href="#i1">
Here is my relevant HML with SVG:
<div style="width:24px;height:24px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 0 24 24">
<path fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
It renders fine but leaves padding above and below the arrow inside the div.
I tried using SVG as background to the div after base64 encoding the SVG tag, as in:
<div style="width:24px; height:24px;margin:0px;padding:0px;background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZWQiIHRyYW5zZm9ybT0ic2NhbGUoMSwxKSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOXY3aC0xNXY0aDE1djd6Ii8+PC9zdmc+');">
</div>
It displays nothing!
Yes there are similar questions asked but this is NOT a duplicate. Nothing in the answers posted to similar questions on SO resolve this problem.
I'm not very sure I understand your question. Maybe this is what you need:
I've changed the viewBox to viewBox="0 3 24 18". In order to get this value I've console.log(thePath.getBBox())
The method getBBox() returns an object with the position and the size of the bounding box of the path. I'm using this values for the new viewBox
viewBox = bb.x bb.y bb.width bb.height
Where bb is the bounding box.
<div style="width:24px;height:18px;margin:0px;padding:0px;background:black;">
<svg viewBox="0 3 24 18">
<path id="thePath" fill="red" d="M24 12l-9-9v7h-15v4h15v7z"/>
</svg>
</div>
The fill needs to be on the path instead of the svg element.
Also, try adding the width="24" and height="24" to the svg element.