I created a small Polymer site (available at http://infinitech.org/beta). I have nested an a href and a core-icon inside of a paper-item. However, I have to click on the text of the a href in order to go to the link. How can I make it so that clicking anywhere on the paper-item will go to the link (so that I don't have to click on the text of the a href)? I'm using Polymer 0.5.1. Thanks so much for your time and help!
It doesn't work for me either. I found a workaround that polymerthemes.com is using. You basically reverse the nesting of paper-item and a
<a href="technews.html">
<paper-item id="technews" tabindex="0" noink>
<core-icon icon="av:news" aria-label="news" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M20.33 4.67L18.67 3 17 4.67 15.33 3l-1.67 1.67L12 3l-1.67 1.67L8.67 3 7 4.67 5.33 3 3.67 4.67 2 3v16c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2L22 3l-1.67 1.67zM12 19H4v-7h8v7zm8 0h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2H4V8h16v3z"></path></g></svg></core-icon>
Tech News
</paper-item>
</a>
This is not covered in the doco so I assume it is not the way it is intended to work. Works for me though on https://gitbacklog.appspot.com.
Although the ink seems to stop working.
As per Polymer's paper-item documentation, you have to put the <a> tag immediately inside <paper-item>. Also add a noink attribute to prevent ripple from freezing.
<paper-item id="technews" tabindex="0" noink>
<a href="technews.html">
<core-icon icon="av:news" aria-label="news" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M20.33 4.67L18.67 3 17 4.67 15.33 3l-1.67 1.67L12 3l-1.67 1.67L8.67 3 7 4.67 5.33 3 3.67 4.67 2 3v16c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2L22 3l-1.67 1.67zM12 19H4v-7h8v7zm8 0h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2h-7v-1h7v1zm0-2H4V8h16v3z"></path></g></svg></core-icon>
Tech News
</a>
</paper-item>
Related
Here is an endpoint for a logo that I will use in the example: https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg
So importing and rendering the SVG as an image and styling it using Tailwind CSS works perfectly fine:
<img src="https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg" alt="logo" class="w-28 sm:w-48 md:w-60" />
However, I can't find a way to modify the SVG as I would be able to do with "normal" SVGs.
note: I am working in a svelte project but I wish to find a universal solution that works no matter the framework, etc.
I tried giving the image attributes that id usually would give to SVGs such as fill:
<img src="https://rdanhgsjebvnzzvsohyx.supabase.co/storage/v1/object/public/assets/logos/logoaidvisor-purple.svg" alt="logo" class="w-28 sm:w-48 md:w-60" fill="#222" />
I assumed that would do the trick but it did not. after plenty of research, I still can't find a solution.
You simply cannot use img if you want to affect the SVG. Inline the SVG directly, that way styles can apply, as it generates the necessary elements that are targeted by the styles.
How exactly you would do this depends on your build system; many have ways of importing files as just their string contents, so you could e.g. use that in conjunction with {#html ...}. If the SVG comes from a DB you can create an API and fetch the contents from there.
(Note that SVGs can potentially execute scripts, so as with anything else, only use #html with secure/sanitized content.)
You can also use an external <use> element – similar in convenience to an <img> element.
Wrap your logo in a <symbol> element and apply an ID.
Remove fill attributes from the logo's <path> elements and add them to the <use> element
Copy the original viewBox attribute to your parent svg
Example
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.1/tailwind.min.css">
<svg class="w-28 sm:w-48 md:w-60" viewBox="0 0 79 38">
<use href="#logo" fill="#ccc" />
</svg>
<svg width="0" height="0" viewBox="0 0 79 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="logo" viewBox="0 0 79 38">
<path d="M0 23C0 20.1333 0.533333 17.6167 1.6 15.45C2.7 13.2833 4.18333 11.6167 6.05 10.45C7.91667 9.28333 10 8.7 12.3 8.7C14.2667 8.7 15.9833 9.1 17.45 9.9C18.95 10.7 20.1 11.75 20.9 13.05V9.1H29.45V37H20.9V33.05C20.0667 34.35 18.9 35.4 17.4 36.2C15.9333 37 14.2167 37.4 12.25 37.4C9.98333 37.4 7.91667 36.8167 6.05 35.65C4.18333 34.45 2.7 32.7667 1.6 30.6C0.533333 28.4 0 25.8667 0 23ZM20.9 23.05C20.9 20.9167 20.3 19.2333 19.1 18C17.9333 16.7667 16.5 16.15 14.8 16.15C13.1 16.15 11.65 16.7667 10.45 18C9.28333 19.2 8.7 20.8667 8.7 23C8.7 25.1333 9.28333 26.8333 10.45 28.1C11.65 29.3333 13.1 29.95 14.8 29.95C16.5 29.95 17.9333 29.3333 19.1 28.1C20.3 26.8667 20.9 25.1833 20.9 23.05Z" fill="red" />
<path d="M44.1855 9.1V37H35.6355V9.1H44.1855Z" />
<path d="M48.6816 23C48.6816 20.1333 49.215 17.6167 50.2816 15.45C51.3816 13.2833 52.865 11.6167 54.7316 10.45C56.5983 9.28333 58.6816 8.7 60.9816 8.7C62.815 8.7 64.4816 9.08333 65.9816 9.85C67.515 10.6167 68.715 11.65 69.5816 12.95V0H78.1316V37H69.5816V33C68.7816 34.3333 67.6316 35.4 66.1316 36.2C64.665 37 62.9483 37.4 60.9816 37.4C58.6816 37.4 56.5983 36.8167 54.7316 35.65C52.865 34.45 51.3816 32.7667 50.2816 30.6C49.215 28.4 48.6816 25.8667 48.6816 23ZM69.5816 23.05C69.5816 20.9167 68.9816 19.2333 67.7816 18C66.615 16.7667 65.1816 16.15 63.4816 16.15C61.7816 16.15 60.3316 16.7667 59.1316 18C57.965 19.2 57.3816 20.8667 57.3816 23C57.3816 25.1333 57.965 26.8333 59.1316 28.1C60.3316 29.3333 61.7816 29.95 63.4816 29.95C65.1816 29.95 66.615 29.3333 67.7816 28.1C68.9816 26.8667 69.5816 25.1833 69.5816 23.05Z" />
<path d="M35.6 2.00104C35.6 0.896468 36.4954 0.0010376 37.6 0.0010376H42.6C43.7045 0.0010376 44.6 0.896468 44.6 2.00104V7.00104H37.6C36.4954 7.00104 35.6 6.10561 35.6 5.00104V2.00104Z" />
</symbol>
</svg>
Limitations: strict CORS policy
External <use> references must be hosted on same domain – otherwise browsers will block them due to cross origin security settings.
Other features like gradients, masks, clip-paths etc. might also not work.
For simple use cases like logos or icons it's still a suitable alternative to <img>.
However you might use an injecting/inlining script like svgxuse
Angular 10 CLI
the component has in the html object in which I refer to the svg file. In svg file, I can't correctly link to css file
html:
<object type="image/svg+xml" data="../../assets/svg/favorite_full.svg"></object>
svg file :
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="????" ?>
<svg class="test" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86
8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4
15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99
14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
</svg>
my svg file is in src / assets / svg / favorite_border.svg
I want to link to any css file (no matter what in this case, I don't understand how it works) For example, app.component.scss
my project structure
enter image description here
I will be glad for any help / hint
Try to read the file with FileReader(), then you can link with ngClass or ngStyle.
I am using inline svg like this
<use xlink:href=""></use>
but for some reason one particular icon is not shown in Chrome (but it's shown in Firefox and ios Safari), other icons are visible in Chrome.
Here's icon itself (it is exported from icomoon)
<symbol id="icon-phone" viewBox="0 0 32 32">
<title>phone</title>
<path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</symbol>
I've also tried to use just href instead of xlink:href, but it didn't work either.
<symbol id="icon-phone" viewBox="0 0 32 32">
and
</symbol>
wrapper and replace it with
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
and
</svg>
I am new to HTML and stuff and I would like to insert a SVG into a button. I tried using <object> but the SVG is invisible. Any suggestions what I could do to make it visible and fit inside the box?
There are a few different approaches. Possibly the easiest way to include an SVG is using an <img> tag, like you would for any other image type:
<button>
<img src="https://api.iconify.design/ic-baseline-face.svg?height=24" aria-hidden="true">
Smile
</button>
In this case, the size of the SVG we're importing is about right, but if it wasn't it might be more difficult to size it how you like, because you have two elements rather than one to think about. In that case, a good alternative is to set it as a background in CSS instead:
.my-button {
width: 3em;
height: 3em;
background: url("https://api.iconify.design/ic-baseline-face.svg?height=24") center no-repeat;
}
<button class="my-button" aria-label="Smile"></button>
This approach is often used for icons, but note that in this method we have to specify a size (in this case using width and height in the CSS).
As a third option, you can include SVG source directly in HTML instead, which allows you to style it with CSS and manipulate it with JavaScript, but that's generally not very useful for button icons. For completeness, though you'd do it like this:
<button>
<!-- From https://material.io/tools/icons/?style=baseline -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
<path fill="none" d="M0 0h24v24H0z"/>
</svg>
</button>
CSS-Tricks has a good article on all three methods.
I'm hoping someone can point out where my bug is with this little problem I have.
I can't resize one <symbol> from an external svg with CSS, but I can another <symbol> from the same external svg.
In the CSS I'm changing the width and height. Which #pluss handles fine, whereas #heart completely ignores it. It just wants to stay at 24px * 24px regardless of CSS sizing.
I can't tell what I'm doing differently. Headscratchingly confusing!
The external icons-defs.svg file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
<title>Add</title>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
<title>Favourite</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
And in HTML:
<button>
<svg class="icon-heart" role="presentation">
<use xlink:href="icons-defs.svg#heart"></use>
</svg>
Like
</button>
<button>
<svg class="icon-pluss" role="presentation">
<use xlink:href="icons-defs.svg#pluss"></use>
</svg>
Add Goal
</button>
When having the same svg with symbols inline at top of the HTML document it works fine.
Any pointers would be much appreciated :)
#robert-longson wrote the solution in a comment, so I'm copy-pasting it here.
One symbol has a viewBox, one does not. SVG is case sensitive so viewbox is not a functional attribute. HTML is not case sensitive so it works inline when parsed by a HTML parser.
So changing viewbox to viewBox (capital B) fixed my bug.