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
Related
I know external svg files can be linked to background images:
background-image: url(Icon.svg);
and symbols id's can be targeted from an external svg file:
background-image: url(Icons.svg#Icon-Menu);
but how can I set a background image to an inline svg symbol? (As below)
My svg is at the top of my web page body and not in an external file.
I want .test background image to be the #Icon-Menu symbol.
.test{
background:#ddd url('../#Icon-Menu');
height:100px;
width:100px;
display:block;
}
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="Icon-Menu" viewBox="0 0 512 512">
<title>Menu</title>
<path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 C96.417,6.679,95.071,5.333,93.417,5.333z" />
<path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 C96.417,41.679,95.071,40.333,93.417,40.333z" />
<path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 C96.417,76.679,95.071,75.333,93.417,75.333z" />
</symbol>
</svg>
</div>
<div class="test"></div>
#Robert Longson
thats right. But you can do it this way.
But symbol is not the way it will work. Unfortunatly you have to use "g" or something like that to reference.
body {
background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}
http://codepen.io/Type-Style/pen/ByvKJq
It will not work if the svg is in the Markup.
An image must be a complete file.
From the SVG specification...
The ‘image’ element indicates that the contents of a complete file are to be rendered...
The same is true for background-image etc.
(1) one possible way with inline SVG would be to use symbols and DIV absolute layering:
<a class="preview-modal__device-icon-link" ng-click="setPreviewWidth('phone')">
<svg class="preview-modal__device-icon"><use xlink:href="#icon-phone">
</use></svg>
</a>
(2) Second solution would be to use a Data URI:
there is a good info here: https://css-tricks.com/using-svg/
using this tool: Mobilefish.com online conversion tool
CSS:
.logo {
background: url("data:image/svg+xml;base64,[data]");
}
HTML:
<img src="data:image/svg+xml;base64,[data]">
<div class="svg-background"></div>
<svg id="svg-source" viewBox="0 0 24 16" fill="none">
<path d="M23.8475 7.18155C23.6331 6.88825 18.5245 0 11.9999 0C5.4753 0 0.36647 6.88826 0.152297 7.18127C-0.0507658 7.45952 -0.0507658 7.83691 0.152297 8.11517C0.36647 8.40846 5.4753 15.2967 11.9999 15.2967C18.5245 15.2967 23.6331 8.40842 23.8475 8.1154C24.0508 7.8372 24.0508 7.45952 23.8475 7.18155ZM11.9999 13.7143C7.19383 13.7143 3.03127 9.14243 1.79907 7.64782C3.02968 6.15189 7.18352 1.58241 11.9999 1.58241C16.8057 1.58241 20.968 6.15349 22.2007 7.6489C20.9701 9.14478 16.8163 13.7143 11.9999 13.7143Z" fill="#073255"/>
</svg>
<style>
.svg-background {
height: 2em;
width: 2em;
background-image: url(#svg-source);
}
</style>
I've tried with # sign - but no result.
I want to use built-in SVG file as background pattern.
I need to achieve 2 purposes
Avoid duplication SVG element on the page
Avoid having external SVG image.
Any ideas?
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 know external svg files can be linked to background images:
background-image: url(Icon.svg);
and symbols id's can be targeted from an external svg file:
background-image: url(Icons.svg#Icon-Menu);
but how can I set a background image to an inline svg symbol? (As below)
My svg is at the top of my web page body and not in an external file.
I want .test background image to be the #Icon-Menu symbol.
.test{
background:#ddd url('../#Icon-Menu');
height:100px;
width:100px;
display:block;
}
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="Icon-Menu" viewBox="0 0 512 512">
<title>Menu</title>
<path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 C96.417,6.679,95.071,5.333,93.417,5.333z" />
<path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 C96.417,41.679,95.071,40.333,93.417,40.333z" />
<path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 C96.417,76.679,95.071,75.333,93.417,75.333z" />
</symbol>
</svg>
</div>
<div class="test"></div>
#Robert Longson
thats right. But you can do it this way.
But symbol is not the way it will work. Unfortunatly you have to use "g" or something like that to reference.
body {
background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}
http://codepen.io/Type-Style/pen/ByvKJq
It will not work if the svg is in the Markup.
An image must be a complete file.
From the SVG specification...
The ‘image’ element indicates that the contents of a complete file are to be rendered...
The same is true for background-image etc.
(1) one possible way with inline SVG would be to use symbols and DIV absolute layering:
<a class="preview-modal__device-icon-link" ng-click="setPreviewWidth('phone')">
<svg class="preview-modal__device-icon"><use xlink:href="#icon-phone">
</use></svg>
</a>
(2) Second solution would be to use a Data URI:
there is a good info here: https://css-tricks.com/using-svg/
using this tool: Mobilefish.com online conversion tool
CSS:
.logo {
background: url("data:image/svg+xml;base64,[data]");
}
HTML:
<img src="data:image/svg+xml;base64,[data]">
I've found a rather cool SVG loader-thingie on codepen, and it works, but I'm having trouble figuring out how to get it into the center of the screen. Regular 'ole Css is not working, so I'm kind of stuck.
This is the SVG/HTML:
<svg width="300px" height="320px">
<path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
<path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
<path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
</svg>
And this is the Css that matters:
svg {
vertical-align: bottom;
display: inline-block;
}
Please help and thanks in advance!
Assuming all your code is in one file (everything in the HTML) and you are not loading the SVG using img or via background-image, try this:
<style>
#loadingSVG { position: absolute; top:50%; left:50%; }
</style>
<svg width="300px" height="320px" id="loadingSVG">
<path class="tri1" d="M11.7 118L9.719 118 72.5 9.259 135.281 118z"></path>
<path class="tri2" d="M12.2 118L9.719 118 54.602 40.259 99.486 118z"></path>
<path class="tri3" d="M48.8 118L46.496 118 72.991 72.11 99.486 118z"></path>
</svg>
See it here: http://jsfiddle.net/993eL/
Now, assumptions aside, the game changes if you are trying to load it as an external file or if you want to use an external stylesheet. If you want to use external stylesheets, basically you have 2 options to be able to style your SVG.:
Have the SVG inline in the HTML document. It doesn't matter if you
insert it via server-side when generating the page or just copypaste
it in the document, it has to be inline.
Load the SVG as an object element so you don't have to insert it in the HTML, but you'll have to use a separate external stylesheet loaded from inside the SVG file.
Using external stylesheets
Example with method 1: inline SVG in the HTML document
In the HTML document:
<svg ... id="Layer_1">
<ellipse .../>
<path .../>
</svg>
In your stylesheet:
/*Center the SVG element*/
/*Option 1: have the element with an specific width so you can
use margin:0 auto;*/
#Layer_1 {
width: 500px;
margin: 0 auto;
}
/*Option 2: move the element anywhere with absolute positioning.
Note: Remember it will be relative to the parent element as long as
your parent element has position:relative set, else it will take
the body as a base for positioning*/
#Layer_1 {
position: absolute;
top: 50%;
left: 50%;
}
See the complete code: http://jsfiddle.net/Sg2Z5/
Example with method 2: load the SVG as an object
In your SVG file import the external stylesheet as an XML stylesheet (remember SVG is XML based):
<?xml-stylesheet type="text/css" href="stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg">
In your HTML, load the SVG as an XML object:
<object type="image/svg+xml" data="YOUR-SVG-FILE.svg">
<!-- Put your fallback here -->
</object>
References and recommended readings
I recommend to read these articles as they explain all of this with more detail
Using SVG http://css-tricks.com/using-svg/
SVG styling http://blogs.adobe.com/webplatform/2013/01/08/svg-styling/
How to Style Scalable Vector Graphics Using CSS http://www.sitepoint.com/svg-styling-with-css/