I have a svg element, and I would like to insert a material icon inside.
Like
How do I include a font awesome icon in my svg?
but in Vue with material icons
That code doesn't work
html:
<svg >
<circle class="background" cx="50%" cy="50%" r=100></circle>
<text class="icon" x="50%" y="50%" >dashboard</text>
</svg>
and css:
.icon {
font-family: "Material Icons";
}
but that code outside from svg element works:
<div style="font-family: Material Icons;">settings</div>
have you tried inside your .svg? I still had to include the material icons link in the head of the html doc that used it, but it did just finally now work for me.
<foreignObject x="0" y="0" width="20" height="20">
<div style="font-family: Material Icons;">settings</div>
</foreignObject>
This might be happening because the style sheet is not loaded first, before the SVG? If that's the case, using
style="font-family: Material Icons;
Should just work on the text element.
If the CSS is loaded before, I think that this answer might be able to provide you with some insight:
https://stackoverflow.com/a/30229965/2523968
Related
Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ?
How about transforms applied on the bitmap images (perspective, mappings, etc.) ?
Edit: Images may be included in an SVG by link reference. See http://www.w3.org/TR/SVG/struct.html#ImageElement. My question was in fact if bitmap images may be included inside the svg so that the svg image would be self contained. Otherwise, whenever the svg image is displayed the link must be followed and the image downloaded. Apparently .svg files are simply xml files.
Yes, you can reference any image from the image element. And you can use data URIs to make the SVG self-contained. An example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<image
width="100" height="100"
xlink:href="data:image/png;base64,IMAGE_DATA"
/>
...
</svg>
The svg element attribute xmlns:xlink declares xlink as a namespace prefix and says where the definition is. That then allows the SVG reader to know what xlink:href means.
The IMAGE_DATA is where you'd add the image data as base64-encoded text. Vector graphics editors that support SVG usually have an option for saving with images embedded. Otherwise there are plenty of tools around for encoding a byte stream to and from base64.
Here's a full example from the SVG testsuite.
I posted a fiddle here, showing data, remote and local images embedded in SVG, inside an HTML page:
http://jsfiddle.net/MxHPq/
<!DOCTYPE html>
<html>
<head>
<title>SVG embedded bitmaps in HTML</title>
<style>
body{
background-color:#999;
color:#666;
padding:10px;
}
h1{
font-weight:normal;
font-size:24px;
margin-top:20px;
color:#000;
}
h2{
font-weight:normal;
font-size:20px;
margin-top:20px;
}
p{
color:#FFF;
}
svg{
margin:20px;
display:block;
height:100px;
}
</style>
</head>
<body>
<h1>SVG embedded bitmaps in HTML</h1>
<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>
<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>
<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>
<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>
</body>
</html>
You could use a Data URI to supply the image data, for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>
The image will go through all normal svg transformations.
But this technique has disadvantages, for example the image will not be cached by the browser
You can use a data: URL to embed a Base64 encoded version of an image. But it's not very efficient and wouldn't recommend embedding large images. Any reason linking to another file is not feasible?
If you want to use that image multiple times inside SVG (Ref.):
<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />
<use href="#img" />
<use href="#img" />
It is also possible to include bitmaps. I think you also can use transformations on that.
I am trying to show an SVG with a bit of CSS in browsers like Edge and Firefox. In Chrome it is working as expected, but not in any other browsers. I have singled out the problem in the CodePen below. Don't mind the messy styling (in the original version there is a different font etc).
The problem is that the SVG is simply not shown at all in other browsers. When I inspect the element it does show the code needed, but nothing is there on the front-end. I am not very experienced with SVG.
I have tried: Adding a viewbox (though I am not sure if I did this correctly) and changing the size of the box around it. Neither did help.
CodePen
svg {
font-size: 260px;
}
.colortext .anim-shape:nth-child(1) {
fill: white;
}
.colortext .anim-shape:nth-child(2) {
fill: #19b5b3;
}
section.portfolio-page {
background-color: #252627;
min-height: calc(100vh - 120px)
}
<section class="portfolio-page">
<svg>
<!-- Clippath with text -->
<clipPath id="cp-text">
<text text-anchor="middle" x="50%" y="30%" dy=".38em" class="text--line">
RT
</text>
</clipPath>
<!-- Group with clippath for text-->
<g clip-path="url(#cp-text)" class="colortext">
<!-- Animated shapes inside text -->
<rect width="100%" class="anim-shape"></rect>
<rect width="23%" class="anim-shape blue-logo"></rect>
</g>
</svg>
</section>
I would like to create an HTML element modeled on an SVG.
I tried the following options:
<object>: The tag is working but is causing problems in the animation of the svg. (You can not move the item without generating bugs)
<svg>: The tag does not allow me to add other elements inside, which is forced me to do.
background-image: url (path); does not allow modeling but just to put the image of the svg in the background. The model does not apply and leaves the user activated "onclick" when he clicks on non-drawn edges.
There would be something that could make a tag modeled on the SVG, so that the event "onclick" does not fire if we click on the "square" of the Div but on the round?
Here is a small diagram that summarizes the situation
Well in reality, as you will understand it is not a round model that I want to set up, it's a kind of tab menu, here is an overview:
I use JQUERYUI to handle tab moves, and the tag causes bugs that make it impossible to use.
An imaginary code that could fulfill this function I would like it to exist
<div model="https://example.com/model.svg">
<span>A untitled tab</span>
</div>
A link element in SVG document
If i understand you right you want a clickable svg tab?
.menu-link polygon {
fill: #222;
stroke: #66e;
}
.menu-link:hover polygon {
fill: #eee;
stroke: #88f;
}
.menu-link:hover text {
fill: #222;
}
<svg viewBox="0 0 100 50">
<a class="menu-link" href="#">
<polygon points=" 15,15 20,5 40,5 45,15 15,15"></polygon>
<text x="20" y="12" fill="white" font-size="0.35em">Text here</text>
</a>
<a class="menu-link" href="#">
<polygon fill="#222" stroke="pink" points=" 50,15 55,5 80,5 85,15 55,15"></polygon>
<text x="56" y="12" fill="white" font-size="0.35em">Other text</text>
</a>
</svg>
I would like to change the default appearance of tooltip in svg elements (title) by any means such as js or css.
I even tried stuff like this:
var title = document.createElementNS('http://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"><div style="background:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(title);
but regardless of whatever i insert as the textContent of title, its simply rendered as a string.
Is there any way to style the default tooltip? Other simple and straightforward alternatives for creating tooltips in svg without using any plugins are also welcome...
You could try this: How to change the style of Title attribute inside the anchor tag?. I didn't test it, so I don't really know if it works.
But since you are using SVG, you can do better than that since you can draw tooltips with any color and shape, even animated. Since you are generating it dynamically with a script, you can calculate the size based on the content and alter the height and width accordingly.
Here is an example of a tooltip using a rounded rectangle in SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g id="component">
<rect id="content" width="50" height="50">
</rect>
<g class="tooltip" transform="translate(20,20)" opacity="0.9">
<rect rx="5" width="100" height="25"></rect>
<text x="15" y="16">Hello</text>
</g>
</g>
</svg>
I used CSS hover to make it appear and disappear:
#component .tooltip {visibility: hidden}
#component:hover .tooltip {
visibility: visible;
}
.tooltip text {
fill: black;
font-size: 12px;
font-family: sans-serif;
}
.tooltip rect {
fill: yellow;
stroke: blue;
}
You can experiment with it in this JSFiddle.
You can also store your tooltips in a <defs> block and reuse it in different objects.
I am using SVGs, and for some reason, the height is set to 289 px by the user agent stylesheet.
I dont want to define the height, as I will be using many SVGs (like at least 256), and dont want to set different css rules manually for each of them by using !important.
So how do I adjust the user stylesheet (using Chrome) or reset the height field for SVGs!, so that it is not defined?
example SVG HTML: (SVG height is 25 px, yet the svg Bounding box renders to 289)
<div id="measure<%= measure.cid %>" class="measure">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" />
<div id="<%= beatHolder %>">
</div>
</svg>
</div>
When trying Alex W's answer, I get this:
Can't you just add the rule to your stylesheet?
<style type="text/css">
...
svg { height: auto !important; }
</style>
You want to put that rule at the very bottom of the style tags to make sure it takes priority.
Also, in your code example it seems you are setting the rect to be 25 pixels, but not the actual <svg> element.
Okay so after playing with your example, I've come up with an answer for you. When using svg its computed style height is set from its parent element, so with that being said you would have to place your svg inside a div that has a width and height so I made a quick little example of how this would be used, so lets say we want to put a svg as a logo and then one for a banner or something we would accomplish this by doing your svg like this,
CSS
.logo {
width: 250px;
height: 27px;
}
.navigation {
width: 960px;
height: 54px;
}
HTML
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>
<div class="navigation">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>