In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until Safari 12. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” …> <image … Read more
That’s a pretty important and useful reason. But other reasons you might do it are so you can: apply the same styling (eg. fill=”blue”) to a set of elements, reference to the group of objects from a use. Not to mention the simple organisational reasons.
The <svg> element is missing the declaration of the xlink namespace, although it is used in the <image> elements. So just added like the following: <svg height=”1000″ preserveaspectratio=”xMidYMid meet” style=”width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);” viewbox=”0 0 1000 1000″ width=”1000″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> SVG2 deprecated the xlink namespace for href attributes.. So in the … Read more
From what I understand SVG 2.0 is still a work in progress with no full browser implementation. For the more elusive features of SVG that may not be implemented by all browser you can check CanIUse to see if the feature is supported.
If the lines are straight horizontal or vertical just place the lines at half a pixel off, like x=”1.5px”. Another way is to apply some CSS to the lines: .thelines{ shape-rendering:crispEdges } The spec chapter on shape-rendering property.
Unfortunately iOS doesn’t support SVG icons at the moment. And it will probably not have support soon. Also android doesn’t support it. Update: It looks like Safari is starting to support SVG favicons See: http://caniuse.com/#feat=link-icon-svg To add a svg icon for pinned tabs within Safari you need to add: <link rel=”mask-icon” href=”https://stackoverflow.com/questions/15710047/website_icon.svg” color=”red”>
Commas are mostly optional and whitespace is also mostly optional. You need one or the other in some cases to say when something ends and the next thing begins i.e. so that 1,1 or 1 1 is not parsed as 11. You can put a single comma between any two numbers so A, 30 50 … Read more
Here are some filters that provide different types of effect: Drop shadow (transparent black shadow with slight offset) Black glow (with a fixed colour) Object-coloured glow (takes the colour of the object to which it is a applied) An example: There’s a demo here. The code: <!– a transparent grey drop-shadow that blends with the … Read more
Use this code to center chart title vertically: title: { verticalAlign: ‘middle’, floating: true } Example Edit Since version 2.1 The floating property can be omitted as the documentation states it is implied by the presence of the verticalAlign property When a value is given, the title behaves as floating.
jQuery plugin for decorating image maps (highlights, select areas, tooltips): http://www.outsharked.com/imagemapster/ Disclosure: I wrote it.