JarCasting
JarCasting JarCasting

svgxuse

WebJar for svgxuse

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

svgxuse
Last Version

Last Version

1.2.6
Release Date

Release Date
Type

Type

jar
Description

Description

svgxuse
WebJar for svgxuse
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/Keyamoon/svgxuse

Download svgxuse

Filename Size
svgxuse-1.2.6.pom
svgxuse-1.2.6.jar 8 KB
svgxuse-1.2.6-sources.jar 22 bytes
svgxuse-1.2.6-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/svgxuse/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>svgxuse</artifactId>
    <version>1.2.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/svgxuse/
implementation 'org.webjars.npm:svgxuse:1.2.6'
// https://jarcasting.com/artifacts/org.webjars.npm/svgxuse/
implementation ("org.webjars.npm:svgxuse:1.2.6")
'org.webjars.npm:svgxuse:jar:1.2.6'
<dependency org="org.webjars.npm" name="svgxuse" rev="1.2.6">
  <artifact name="svgxuse" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='svgxuse', version='1.2.6')
)
libraryDependencies += "org.webjars.npm" % "svgxuse" % "1.2.6"
[org.webjars.npm/svgxuse "1.2.6"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

svgxuse

A simple polyfill that fetches external SVGs referenced in <use> elements when the browser itself fails to do so.

Example of <use> with external reference:

<svg class="icon icon-edit"><use xlink:href="symbol-defs.svg#icon-edit"></use></svg>

IE (9, 10, 11) fails to load symbol-defs.svg in the example above. svgxuse goes through every <use> element. If the element is referencing an external SVG and the browser has failed to load it, the script sends a GET request to grab and prepend the SVG to <body>.

Try this demo in IE or other browsers to see how this polyfill works in action.

Features

No browser sniffing

This polyfill relies on feature detection. As a result, it detects and attempts to solve issues in any browser that may fail to fetch the linked SVG. For example, cross domain linking to external SVGs may fail with this error: Unsafe attempt to load URL X from frame with URL Y. Domains, protocols and ports must match. Using svgxuse, your SVG would still load as long as it is served with proper CORS headers.

Doesn't try to support IE8

svgxuse is a polyfill and therefore doesn't need to support IE8. It's minimal and to the point.

No requestAnimationFrame or setTimeout for polling the DOM

Unlike similar solutions, svgxuse doesn't use requestAnimationFrame or setTimeout for polling the DOM.

No repetitive addition of inline SVGs

Instead of replacing <use> elements with SVG paths, svgxuse only adds symbol definitions to the markup once.

Usage

<script src="svgxuse.js" defer></script>

With NPM

npm install --save svgxuse
<script defer src="node_modules/svgxuse/svgxuse.js"></script>

With Bower

bower install --save svgxuse
<script defer src="bower_components/svgxuse/svgxuse.js"></script>

License

MIT © IcoMoon.io

Versions

Version
1.2.6