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
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?
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
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.
Webkit allows the use of an external SVG file as a mask for any HTML element. Ie:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
Resulting in:
(More information here: http://webkit.org/blog/181/css-masks/)
Does anyone know if there's a way to do it without an external SVG file? More specifically, can it be done with SVG generated from javascript?
Well, two years have passed since I asked this question and the browser landscape changed a lot. Here's an example of exactly what I wanted to do, which works only in Firefox for now: http://mozilla.seanmartell.com/persona/
As you can see there's a div with id chameleon which has the following style:
<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);">
#clip1 points to a clipPath element inside an inline SVG element which links to a shape.
<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath>
So now it's doable in Firefox.
Thanks #mart3ll for the practical example!
I'm not sure about the WebKit specific extension but Mozilla allow you to apply SVG effects like masks and filters on HTML elements. These can be defined in external files or directly in the markup. See this post. This isn't in any spec at the moment, but the SVG and CSS working groups are working together to spec this approach. See the Working Group's page (although only filters, not masks are mentioned explicitly there).
You can usually link to something in SVG by including the id of the element in the url value (e.g. url(#someID)). You could try generating the SVG via JS, giving it an id and inject it into the document and see if it works. There is no spec as it is a WebKit extension so it is hard to say without trying it out.
Yes I believe it's possible. Recently I used PHP to generate the SVG file.
Here is an example that I made:
http://jsfiddle.net/brokeneye/ygsKm/
Also check out http://raphaeljs.com/