I have an SVG sprite file which was supplied by designers for my app. The convention they'd like me to use to render their SVG icons is to load the sprite at the top of the <body> element and then render icons like this:
<svg class="u-icon-gear-dims">
<use xlink:href="#gear"></use>
</svg>
This works when I add the SVG sprite inline, that is, plop the entire contents of the SVG sprite into my template.html file. Adding the sprite inline makes the html file ugly but, more significantly, having to manually do it raises maintainability concerns.
I'm currently referencing the individual SVGs directly to render icons, but this has performance implications as there is often a split second delay when the icon has not yet been loaded.
I found this SO topic, but there does not appear to be a viable answer.
FWIW, our app uses webpack and I'm currently trying to load the SVG sprite into a template HTML file.
How can I dynamically load an SVG sprite from a file in an HTML file?
Are you using PHP? There are methods for including SVG markup inline using backend languages.
https://sheelahb.com/blog/how-to-get-php-to-play-nicely-with-svg-files/
Related
I am creating SVGs directly in the client. Therefore, in my Javascript in the client I am creating the raw SVG and manipulating it depending on the user input.
I took the raw SVG and placed it in a file and then displayed that SVG file right next to the raw inline SVG. The result was much more crispy.
Here is the raw inline SVG:
Compare this to the SVG when placed in a file and using an tag:
As you can see the quality varies a lot!
Here is a codepen link so that you can directly grab the raw SVG if you would like to perform tests: https://codepen.io/fabiansvensson/pen/WNMJpQr
<html>
<body>
<!-- THE RAW SVG -->
<svg></svg>
</body>
</html>
Importantly, I did notice that the quality seems to be better in the codepen, which leads me to think that perhaps the problem has something to do with the styling of the page. I haven't been able to find any reason why this might be. I am considering writing the raw SVG directly to file (not ideal) or somehow making the styling of the SVG independent from the rest of the page (e.g. iFrame).
Any ideas what might be causing this and how to solve the problem?
I have searched the web but the answers showing embedding the SVG into the HTML using <object>, <img>, etc. What I want to do is open a large SVG file that contains lots of images, find the image I need, and show only that image on the page. How can I do that?
File structure is:
directory
index.html
script.js
images.svg
A few steps:
Use the Fetch API to get the image data.
Use a DOM parser to parse the XML into a document.
Find the SVG subset you want. (You didn't show us your XML, but this is likely as simple as document.querySelector().)
Create an SVG element. (This is actually a bit tricky due to the namespace. See also: JavaScript createElementNS and SVG)
Append it to the relevant element on your page.
hello damn i think you can add svg in your html code and run code but you cant font-size svg in css you can use width and height in svg to big font-size ok under
I have a bundle of SVG components in my sprite.SVG file and an HTML page where I am including those SVG components here in HTML.
eg:
<svg class="svg-icon">
<use xlink:href="sprite.svg#hiw-svg"></use>
</svg>
Now , I want to apply javascript on the components of svg's which I included, So how should I do that, since those components are defined in sprite.svg file.
One possible solution is that I include those sprite symbols directly as svg in my html but I don't want to do that as I have lots of svg's which will take lot of space in html.
So what is is the best way I can apply GreenSock js or simply (JS) for animations on sprite.svg file.
There's a way to use javascript inside the svg when using an object tag to embed svg.
Here's an example of embedding the javascript animation inside the svg file itself.
https://codesandbox.io/s/inline-svg-javascript-with-object-iy2mq?file=/index.html
This is a bit of a long shot, but does anyone know of a tool that can export a png from an svg input AND retain the CSS styles applied to it. I have used canvg, but everything appears black in the output, as the styles are kept in css and not part of the svg document.
The solution is web based, and i'd like to perform the conversion client side using a javascript solution if possible.
Update:
I understand that you are using an external stylesheet for your SVG markup. So I think you need a three-step solution:
Make the stylesheet declarations that apply to the SVG markup inline. This is done best client-side. I do not have a solution in source code right now, but it should be possible to use W3C DOM Level 2 Style interface implementations to find out the selectors that apply to an element, and the declarations that have been used in the corresponding blocks (document.defaultView.getComputedStyle() alone will probably result in an SVG fragment having too many inline declarations).
Convert SVG markup with inline stylesheets to PNG. This is best done server-side (e. g., with ImageMagick), so you would need to send the SVG markup to the server.
Serve the PNG resource to the user.
Those two steps could be performed on form submission where in the onsubmit attribute you do step #1 and then call the form's submit() method.
#pluke, you've asked in the comments of the reply of #PointedEars for source code to turn external CSS styling into inline styles for your SVG. I've spent hours of searching for such a tool myself, and found none. However, I've discovered a quite specific solution that applies SVG generated with Rickshaw / D3: #thirdcreed has posted the JavaScript it at: Rickshaw CSS/Axes in JSDOM - just adapt those D3 specific selectors to your custom CSS / SVG elements as needed.
I have to add some interactive features to SVG directed graphs.
So far the graphs I want to show are generated from a dot file and rendered as SVG. I'd like to know if there is some easy way to add interactivity (Maybe with Javascript) to such SVG documents.
What I need is to display some information when the mouse goes over a node and to make it possible to compare two nodes.
Since my models are generated automatically I would prefer to keep the dot-generated SVG and put on it additional information with a separate Javascript.
I have an example with inline SVG. The difference between this SVG and what you have is that the one in my demo has id attributes for nodes and things. I did get this SVG from the graphviz website.
Demo
(Click on the "Hello" node)
When I get a chance to upload an SVG on my server, I will try accessing SVG from an embed element. I can't do it on JSFiddle do to same domain policy in browsers.
This page may also be of help. It shows some of the scripting capabilities of SVG, although for all of the examples, the script is in the SVG itself.