I am trying to use SVG icons on my React site using an external SVG file with all of my icons.
I am using the <use> tag and calling them from a component. However, I get a console error that the browser cannot get the SVG file (404). It is currently in the same folder as my component jsx file.
I have an external file called svgSprites.svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" >
<path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>
and in my component:
<svg>
<use xlinkHref="svgSprites.svg#icon-home"></use>
</svg>
Related
Im having issues trying to insert svg path code into the footer of my website using the Wordpress Customizer menu. It seems Wordpress is stripping the code from:
<div class="wcpay-connect-account-page-payment-methods"><svg width="51" height="35" viewBox="0 0 51 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="50" height="34" rx="3.5" fill="white" stroke="#F3F3F3"></rect>
<path d="path...." fill="#15195A"></path>
<path d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
to:
<div class="wcpay-connect-account-page-payment-methods"></div>
Theme: Oceanwp-3.1.2
SVG Paths do load within main page content just not in the footer.
I have tried looking around for different code snippets to add into my functions file to disable the stripping of SVG tags but none seem to have worked.
Does anyone have an idea on how I could enable SVG path codes/stop them from being stripped within my footer?
I am using React, and I am trying to load a svg icon from a sprite. My sprite is like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 28.3 28.3" id="square">
<path d="M.3 30.7h27L13.8 3.8zM126.3-51.7c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z" />
<path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
</symbol>
<symbol viewBox="0 0 28.3 28.3" id="circle">
<circle cx="14.2" cy="14.2" r="14.2" />
</symbol>
</defs>
</svg>
And I load it with:
<svg viewBox="0 0 28.3 28.3" className="App-icon">
<use xlinkHref="./sprite#square" />
</svg>
With no results. I made a sandbox as an example: https://codesandbox.io/s/l711v6j7v7
If you want to reference it as external resource you need to use the proper URL to the svg file and it needs to be publicly accessible. So in the codesandbox you need to move it to the public folder, so that you can access it in the browser via
https://codesandbox.io/s/l711v6j7v7/sprite.svg
Then you can reference it like this:
<use href="/sprite.svg#square" />
See this fork of your codesandbox.
For those where the SVG file is an existing/external svg file.
You probably have an existing SVG webpack loader which is not working with the concept of SVG sprites. Why? It generally needs a file reference/url to the sprite file or the SVG (nodes) must exist in the DOM (Solution below)
This works:
Transform the plain SVG to JSX (google html to jsx)
Create a new pure react component and simply return the transformed JSX in render() method
Import and include the created react sprite component
Now use the sprite symbol via <use><svg href="#symbolnameorid"></svg></use> You can use it without the file prefix now
I am using canvg to render the following svg to the canvas however it fails. I am not sure why
<svg class="circularReferenceSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<marker xmlns="http://www.w3.org/2000/svg" id="triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="4" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#000000"></path>
</marker>
</svg>
My guess is that it has to do something with xmlns. I could not find on the canvg webpage anything about it. Any help will be appreciated.
Here is the screenshot of where the canvg seems to fail
Here point and angle is undefined
you need to wrap marker tag with defs tag.
If you have an Angular component that uses svg files by referring to symbols from one packed file:
svg instance
<svg>
<use xlink:href="#my-symbol"></use>
</svg>
symbols as they appear in the imported file
<symbol id="my-symbol" viewBox="0 0 24 24">
<title>my-symbol</title>
<path class="path1" d=" ... data here ..."></path>
</symbol>
in order to get control over scaling behavior, every symbol element should apparently have preserveAspectRatio="..." set accordingly.
What if I want to do that dynamically, taking the values for preserveAspectRatio from component instance HTML input?
Something like:
imaginary my-icon template
<my-icon preserveAR="alignMeetOrSlice">
<svg preserveAspectRatio="{{preserveAR}}">
<use xlink:href="#my-symbol"></use>
</svg>
</my-icon>
desired render:
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://somedomain.com/my.svg#my-symbol"></use>
#shadow-root (user agent)
<svg id="my-symbol" viewBox="0 0 24 24"> <!-- attribute should go to this svg -->
...
</svg>
</svg>
I tried querySelector('symbol') on the container - but it returned null results.
Is there a method to get into the shadow root and modify the symbol element?
In JS you can use direct assignment for svg.preserveAspectRatio.baseVal.align.
Instead a preserveAspectRatio="none" in HTML
you can write svg.preserveAspectRatio.baseVal.align=1 or svg.setAttribute('preserveAspectRatio', 'none'); in an JS script.
The examples are presented here:
with code-generation
alternatively with HTML-injection
and available values for aspectRatio can be seen here
I need to inline SVG files from urls.
I'm not sure if it is important, but we are using Angular 2
I need to convert this
<img src='svg/workspace.svg'>
into this at runtime
<svg width="100%" height="100%" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" fit="">
<path d="M13.95 4.05A7 7 0 1 0 15.93 10H13.9A5 5 0 0 1 4 9a5 5 0 0 1 8.536-3.536L10 8h6V2l-2.05 2.05z" fill-rule="evenodd"></path>
</svg>
Is there a library to do this?
Update
At this point we tried [inlineHTML] from angular, but it "sanitizes" the svg, and we end up with nothing
Update 2 a solution
We gave up and ended using the <use> tag inside the <svg> tag
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink"
attr.xlink:href="svg/{{workspace.svgName}}.svg#icon"
></use></svg>
attr is required because angular2 didn't understand plan xlint:href, the result is similar to inlined SVG, but we have to edit the SVG files to remove width, height and fill tags.