I have some SVG icons I'm using which show up correctly in Firefox and Safari, like this:
...but they come out clipped at the edges like this in Chrome (both MacOS and Windows):
The source images are square (they have square viewBoxes, even if there's extra internal blank space), and my SVG markup treats them as square:
<image id="download" href="assets/download.svg" x="161.5" y="0.5" width="2.5" height="2.5"/>
<text id="low-battery-text" x="169" y="2.75" text-anchor="end"></text>
<image id="low-battery" href="assets/low-battery.svg" x="169.5" y="0.5" width="2.5" height="2.5"/>
If I make the specified height of these icons a bit taller then Chrome stops clipping them, but that changes the positioning and scaling of the images a bit too. And besides, it shouldn't be necessary.
I get the impression that Chrome is ignoring the viewBox values for the SVG images, it's finding the internal edges of the images, and scaling according to that (but that's just a guess). (No, that's not it.)
Here's what the SVG inside one of the SVG files looks like:
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<g>
<path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
v-8.861H25.462z"/>
<path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>
I can only find very different topics discussed when I try to Google for an answer to this problem, so I hoping someone who may have encountered a similar issue might have a suggestion for fixing it.
Update:
Interesting experiment - it isn't a good solution, but it's perhaps revealing of the underlying problem.
If I bypass using an SVG image file, and paste the content of the SVG file into my own SVG, the clipping problem goes away:
<svg viewBox="0 0 30 30" x="161.5" y="0.5" width="2.5" height="2.5">
<g>
<path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
v-8.861H25.462z"/>
<path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>
I'm rather new to icon-fonts in CSS and now ran into the following Problem:
I have several boxes containing an Icon. Sadly the upper part of the icon get's cropped off.
I found out, that the icon-font I'm using is adding a ::after-pesudo-element which is slightly offset to the original element and that causes the part that is cut off. (See Screenshots)
(The Icon-Font I'm using is http://linea.io)
I inverstigated furhter and realized that this only occured due to the fact that I have the following CSS on the Icon:
-webkit-background-clip: text;
color: transparent;
If I remove this, the Icon-Color will become black and be shown whole.
I don't know if this is due to a bug in my CSS since I couldn't find anything on the web.
But I removed almost all of my personal CSS and the bug still occured.
Those don't look like CSS fonts, they're simply SVGs. That off set error you see tends to happen when the viewBox, height, or width of the SVG isn't correct. If you still need to use them you should inline them, just copy and paste the SVG code.
Taken from the link you posted:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</svg>
If you prefer to use a real CSS icon library, I'd recommend using something a bit a more tested such as Font Awesome. But these are a dime a dozen and if you Google you could potentially find something you like.
Basic needs:
I am working on a Qt application that replaces colors in an svg.
A nice implementation is to parse the svg xml, and replace the colors as found with a good color match.
Unfortunately, the application must run on a platform with very limited speed and memory, and loading the svg into the QSvgRenderer from an xml (or text string) is extremely slow.
So - my current implementation is to string replace the occurrences of hex known colors in the QByteArray loaded by the renderer.
A big limitation - if I want to replace a fill color with a pen color, and they match, I end up with a broken blob.
A second limitation: I can only have 2 defined colors, a fill and a pen.
What I would like:
I want to be able to create a "parameterized" svg, where I can replace "color1", "color2", "color3" defined at the top, with whatever colors the user chooses.
Note - the svg has to be loaded by the QSvgRenderer, so the parameter values can't be in an outside html or js.
The svg must be self-contained... with no outside caller requirement.
But I can replace in code the parameter value before load.
I just want to be able to replace parameters in a single location, instead of actual values inside the xml everywhere they occur.
What I have tried:
I have read in the svg documentation that it is possible to create parameterized values. This is from an example, as much as I understand it...
w3.org example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 40" width="100%" height="100%">
<title>Reusable Button</title>
<desc>Takes parameters from parent document's embedding element.</desc>
<defs>
<ref id="paramFill" param="color" default="blue"/>
<ref id="paramText" param="text-label">button</ref>
<ref id="paramStroke" param="outline" default="navy"/>
</defs>
<g>
<rect id="button_rect" x="5" y="5" width="100" height="30" rx="15" ry="15" fill="url(#paramFill)" stroke="url(#paramStroke)" />
<text id="button_label" x="55" y="30" text-anchor="middle" font-size="25" fill="black" font-family="Verdana">
<tref xlink:href="#paramText" />
</text>
</g>
</svg>
Unfortunately Qt doesn't load it and browsers show as error.
Second example: from S.O: Define color in SVG
<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<style>
.myfill { fill:red }
</style>
<g fill="blue">
<rect x="0" y="0" width="704" height="702" class="myfill" />
</g>
</svg>
This loads in browser correctly as red, but Qt loads it with blue - so clearly it does not support the parameter value.
Is there any possible version of svg that uses parameters, that can be supported by Qt ?
Can somebody please help fix either of my examples or give a correct / better example ?
Thank you.
Qt version: 4.8
A long, long time ago, when some SVG renderers did not support style sheets, I solved this with XML entities:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY red "#ff0000">
]>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
<g fill="blue">
<rect x="0" y="0" width="704" height="702" fill="&red;" />
</g>
</svg>
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.
What are the cons to using SVG in terms of validation, accessibility, and maintainability for CMS-based websites?
In a project I need to make the Navigation fluid scalable without losing the quality of text and gradient. and it's not possible with HTML, CSS only.
A button like this:
So I found this example (although it's not exactly like what I want).
but it's not valid:
This button was made by SVG code-- no HTML and CSS here.
SVG Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="button_surface" gradientUnits="objectBoundingBox"
x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#434343" offset="0"/>
<stop stop-color="#000000" offset="0.67"/>
</linearGradient>
<linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
<stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- button content -->
<rect x="10" y="10" rx="15" ry="15" width="150" height="80"
fill="url(#button_surface)" stroke="#363636"/>
<text x="30" y="55" fill="white"
font-family="Tahoma" font-size="20" font-weight="500">
SVG Button
</text>
<!-- vitual lighting effect -->
<rect x="12" y="12" rx="15" ry="15" width="146" height="76"
fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>
My question arose because this website will be made using WordPress. What are the disadvantages to using SVG code over HTML, CSS, and JavaScript?
Edit: I found this article on Microsoft's Website, which says SVG is better than Canvas to make UI Elements because of less UI code.
The biggest problem you'll have is browser compatibility. If you need to support older versions of IE (and most public web sites will need to) then you can't use SVG without resorting to Javascript hacks because the browser doesn't support it.
In addition, SVG isn't supported in the Android browser prior to version 3.0, which currently accounts for virtually all Android mobiles out there apart from a few tablets. If you need to support these, then again SVG isn't the solution.
If you're okay with not supporting those browsers (or if you can work out a fall-back solution) then go for it.
In terms of maintainability, I recommend creating your button using a vector graphic editor that can export to SVG. It will be a lot easier to maintain if you have a source file which you can edit in a graphical environment than if you are trying to edit the SVG markup directly.
In terms of validation, the reason you're getting errors is because of the way you're embedding the SVG into your HTML. You shouldn't be defining an XML header for the SVG when it's embedded like this, be cause an XML header should only ever appear as the first line of an XML document.
If the whole document is XML (ie xhtml) then you need to put the namespace definitions for both xhtml and SVG at the top of the document. If the document is non-XML (ie plain HTML), then you don't need the XML declaration at all.
The following will work in all browsers that support embedded SVG:
<html>
<head>...</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
....svg content here....
</svg>
</body>
</html>
This should solve your validation issues.
If the SVG is to be loaded from an an external file, then it should include the XML declaraion.