I'd like to use an SVG image as a CSS sprite through a content property, bootstrap-style, like so:
i.rectangle-image {
content: url(rectangle.svg);
}
and here's my SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80"/>
</svg>
and proposed HTML:
<div><i class="rectangle-image"></i> Hello, world!</div>
I'd like to be able to re-colour the SVG in my application, for example to have the icon appear purple in some locations, and white in others. I know I can accomplish this by having three different SVG files (or data URIs) with the fill attribute set differently on the <rect> tag, but I'm wondering if there's a way for me to do this through CSS in my HTML?
I've tried adding a fill attribute to the i.rectangle-image selector, but that doesn't work.
I've looked at this answer and it's not quite what I want. They suggest embedding SVG throughout the page, and I'd prefer to do this via CSS content if possible. Any thoughts? Am I out of luck?
If you use the CSS content facility you're loading the SVG data basically as an image. For privacy reasons you can't affect how the image is displayed using external CSS or javascript.
If you want to change the contents of SVG data you'd either have to load it via an <object> or <iframe> tag or put it inline in the HTML file.
What abouth giving the SVG transparency and fill the background using css background color?
The sugested solution from #MMM looks great:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve">
<polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/>
<script>
document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash);
</script>
</svg>
http://jsbin.com/usaruz/2/edit
http://codepen.io/Elbone/pen/fHCjs
You can use SVG Image Editor tool to edit the colors in front end and copy the code and use it where you wanna place it, which requires short time of period.. Try it surely it will work out
Related
I need to create a number of SVG files and would love to keep a set of common symbols in one file and import them into the others.
I managed to do this using a <use> element:
<use href="common.svg#symbol1" />
The problem is that if common.svg has a CSS style that affects an element, the style has no effect in the file where the element is imported.
I uploaded two SVGs on svgur.com to show this:
https://svgur.com/i/bYv.svg
...defines a circle with id ball affected by a style that sets a red border around it.
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>#ball { stroke:#ff0000; stroke-width:10; }</style>
<circle id="ball" cx="50" cy="50" r="45" />
</svg>
https://svgur.com/i/bXA.svg
...uses the circle. The circle is visible but the border is not.
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use href="bYv.svg#ball" />
</svg>
Questions:
Is this a bug of the SVG renderer I'm using or is it how it's supposed to behave?
Every renderer I tried (chrome, firefox, inkscape) shows the same result so I suspect this might be the intended behavior.
Is there any way to import an element from an external SVG file and the CSS styles that affect it too, so that it appears exactly like it does in its original document?
Is this a bug of the SVG renderer I'm using or is it how it's supposed to behave?
It is the intended behaviour. CSS rules do not apply across document boundaries. You are importing the SVG into your main document, but your CSS is in another document.
Is there any way to import an element from an external SVG file and the CSS styles that affect it too...
No.
Well I suppose you could technically write some Javascript to load the other file and extract the CSS rules. But I strongly suspect you don't want to do that.
You SVG "sprite document" should not have CSS rules in a <style> tag.
The best approach is to pre-prepare you SVGs to be used as sprites.
What I would do is import your common.svg into a vector editor and convert all your CSS attributes into presentation attributes. For example Illustrator lets you choose the method of styling when you export an SVG.
What you want is for something like this:
<svg>
<style>
.st0 {
fill: red;
}
</style>
<symbol id="whatever">
<path d="..." class="st0"/>
</symbol>
</svg>
to be converted to:
<svg>
<symbol id="whatever">
<path d="..." fill="red"/>
</symbol>
</svg>
According to the Scalable Vector Graphics (SVG) 2
specification (W3C Editor’s Draft, 08 June 2021) it seems that the style of the original document should be applied where an element is imported.
Section 5.5. The ‘use’ element:
The cloned content inherits styles from the ‘use’ element and can be the target of user events. However, these cloned element instances remain linked to the referenced source and reflect DOM mutations in the original. In addition, all style rules that apply in the scope of the referenced element also apply in the scope of the cloned shadow tree.
And 5.5.3. Style Scoping and Inheritance:
The use-element shadow tree, like other shadow trees, exhibits style encapsulation, as defined in the CSS Scoping module [css-scoping-1]. This means that elements in the shadow tree inherit styles from its host ‘use’ element, but that style rules defined in the outer document do not match the elements in the shadow tree. Instead, the shadow tree maintains its own list of stylesheets, whose CSS rules are matched against elements in the shadow tree.
When the referenced element is from an external document, the stylesheet objects generated when processing that document apply to the shadow tree, and are read-only. All URL references in the stylesheet, including fragment-only references, must be made absolute, relative to the URL of the document that contains the referenced element. User agents may re-use the same stylesheet objects for any shadow trees that reference that same external document.
So it's the browsers and SVG renderers I tried that are not conforming to the standard.
I'm still looking for a way to emulate this behavior on existing SVG user agents.
Your styles will be applied, provided your svg asset code is inlined
<svg style="display:none" class="svg-asset" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
#inline-ball { stroke:#ff0000; stroke-width:10; }
</style>
<circle id="inline-ball" cx="50" cy="50" r="45" />
</svg>
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#inline-ball" />
</svg>
If you prefer not to inline svg code then "fragment identifiers" might be the better embedding approach.
It's basically a sprite concept:
So your image assets(like symbols) need to be positioned with some x or y offset on sprite pane (unlike symbols who could be positioned with overlapping).
You're actually loading a complete svg including embedded css style elements but choose a particular view frame.
See this articel on css.tricks.com
css.tricks.com: How SVG Fragment Identifiers Work
Your svg would be something like this
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 96" >
<g id="icon01">
<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>
<g id="icon02">
<path d="M32,43.2c0,2.7-1.2,5.1-3,6.8l0,0l-10,10c-1,1-2,2-3,2s-2-1-3-2l-10-10c-1.9-1.7-3-4.1-3-6.8c0-5.1,4.1-9.2,9.2-9.2c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,33.9,32,38.1,32,43.2z"/>
</g>
<view id="icon-clock-view" viewBox="0 0 32 32" />
<view id="icon-heart-view" viewBox="0 32 32 32" />
</svg>
For using the fragment identifiers we need to add <view> elements with corresponding sprite area coordinates (defined in viewBox attribute).
Unlike symbol definitions we don't nest the actual path data in view elements.
Embedding in html works by adding the target ID to our src url.
<img class="svg-fragment" src="fragment-ready-1.svg#icon-heart-view">
However, inlining svg graphics in your html, still offers the best styling controls.
(e.g styling elements in your websites css file)
Maybe we'll see additional support for styling remotely embedded svg assets in the future ... Until then we still have to cope with some browser quirks.
Is there some reason as to why Adobe Dreamweaver refuses to change the color of my SVG graphic when I copy and paste it into my HTML sheet?
It's the desired color when I create this in Adobe Illustrator, then I have it, then copy and paste the SVG code into my HTML sheet and it decides its going to be a different color....
Here is the SVG code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
<defs>
<style>.cls-1{fill:#e0dddd;}</style>
</defs>
<path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/>
</svg>
The result I get is as per the image.
I really do deal with some idiotic situations at times! In what universe is the hexadecimal color #E0DDDD a blue?
Background
I have a set of SVG icons that all have drop shadows. To make this work in Chrome, I can't just use filter:drop-shadow. I have to use filter:url(#drop-shadow), and define the drop shadow in my <defs> section.
I also have multiple instances of these icons on the page (they are filetype icons in a list of files), so I am using <use> to keep my page DRY.
Code
Exernal SVG File
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
..... more filter lines, shortened for brevity
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<symbol id="download-zip">
..... another icon
</symbol>
... more icons
</svg>
Inline SVG on the Page
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>
See minimal working example here: http://h.andymercer.net/chrome-svg-bug/
Problem
The problem is that Chrome isn't finding the #drop-shadow link, and so is breaking the icons. Firefox, conversely, displays the icons perfectly.
Firefox:
Chrome:
If you notice, the Chrome screenshot DOES show some portion of the icon. It is displaying the portions that don't use the drop shadow filter.
I can't figure out why this is, because the drop shadow is in the <defs> that is on the same page as the <symbol>.
Question
Is there something I am missing, or is this a Chrome bug?
Edit
Per comments, I was asked for a MCVE. I hadn't done that because the problem inherently requires external URLs, which is typically frowned upon here. However, to demonstrate the problem, take a look at this:
http://h.andymercer.net/chrome-svg-bug/
In Firefox, you can see the icon. In Chrome, it is blank.
In Chrome, <defs> must be located inside the same <svg>.
In your case:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="drop-shadow">
<feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
</filter>
</defs>
<symbol id="download-pdf">
<path filter="url(#drop-shadow)" d="" fill="">...</path>
</symbol>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download-pdf"></use>
</svg>
Conforming to modern browsers capabilities, it's easier and cleaner to create different external svg files, one for each icon, then embed them using <object> or <img> tags.
<object> lets javascript access and modify SVG code via DOM, while <img> embed SVGs denying DOM access to them. So, in your case using <img> should be a better choice.
All,
I'm pretty new to using SVGs, and I'm hoping someone here can explain to me how to target a particular element of my SVG with CSS?
What I'm trying to do is put together a country map where specific areas will appear darker when the user hovers over them. The map was made in layers in Photoshop, then imported in Illustrator and exported as a SVG file. So far, so good. But I'm running into trouble when I try to style their individual parts (which Illustrator put in "g" IDs and tags).
The code looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1762 2043" style="enable-background:new 0 0 1762 2043;" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g id="Area1">
<image style="overflow:visible;" width="378" height="272" id="Area1" xlink:href=".../.../121F7A955DACD041.png" transform="matrix(1 0 0 1 657 912)">
</image>
</g>
Followed by an "Area2", "Area3", etc.
Now I figured if I simply used "Area1:hover" in my stylesheet, it would work -- but it doesn't.
Oddly enough, when I set "display: none" for the same ID in my CSS, it DOES hide the area. So why won't the hover attribute work?
The <g> element defines a group of SVG elements. It doesn't actually take up any space in the rendered SVG image. So there is nothing for you to :hover over in order to activate this rule in your stylesheet.
You can fix this by setting :hover rules for the group's child elements, or by adding a child selector to the CSS rule, like #Area1 > *:hover, for example.
Here's a simple example (JSFiddle link)
CSS:
#a1 > *:hover {
fill:#fc0;
}
SVG:
<svg viewBox="0 0 200 200">
<g id="a1" style="fill:#e82">
<path d="M50,50v100h100v-100z" />
</g>
</svg>
Update: Creating SVG maps with :hover style attributes
If you try to create an SVG map from multiple overlapping <image> elements, you're going to have problems in the overlapping parts because the :hover style is only applied to the topmost element, even if it only contains transparent pixels.
To fix this, you will have to apply an SVG clipping mask to each section of the map. Alternatively, you could create the map entirely from SVG elements. Here's an example of the latter approach.
I think your problem is that your group id (g tag) is the same id of your image element
<image overflow="visible" width="209" id="Area1" height="248" xlink:href="//www.elige-argentina.com/assets/img/mapa-argentina.png" transform="matrix(1 0 0 1 612.6923 23.6923)">
</image>
Working Fiddle: http://jsfiddle.net/b2f2jx0f/3/
I'm just starting on svg and trying to figure out the limitations of styling.
I have an svg text element in svg. Some of my text elements are tagged with data-editable="true".
I would like for users to be able to easily see what the tagged elements are. I'm imagining a simple, toggleable, translucent overlay.
When I hover over the element in the DOM view in chrome the text element is rendered with a blue-ish overlay. I would like to get a similar effect or something that is somewhat close.
I'd prefer using css if that is possible but any way of achieving that effect would be good. Worst comes to worst I can hack something with inserting rect elements using d3 and jquery but that seems quite messy.
Building on top of an answer by Erik Dahlström
<svg width="100%" height="100%" viewBox="0 0 500 140" preserveAspectRatio="xMidYMid meet">
<style type="text/css">
*[data-editable=true]:hover{ filter:url(#highlight) }
</style>
<filter x="0" y="0" width="1" height="1" id="highlight">
<feFlood flood-color="rgba(100,200,0,.5)"/>
<feComposite in="SourceGraphic"/>
</filter>
<text data-editable="true" y="100" font-size="100">test</text>
</svg>
This works with plain CSS and a filter definition.