I'm building an application that uses SVG paths, and I'd like to be able to see my paths rendered. Is there a site, say something like JSFiddle, on which you can paste in an SVG path, get it validated, and see it rendered?
EDIT: I've found that JSFiddle works fairly well for this, by selecting Raphael.js, svg.js, etc as a framework. e.g. http://jsfiddle.net/DFhUF/1393/
var paper = Raphael(0, 0, 300, 500);
paper.path("M75,75 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})
paper.path("M75,225 m-40,-50 h80, a10,10 0 0,1 10,10 v80 a10,10 0 0,1 -10,10 h-80 a10,10 0 0,1 -10,-10 v-80 a10,10 0 0,1 10,-10")
.attr({stroke: "#808", opacity: 1, "stroke-width" : 6})
That's probably good enough for my needs, but it would be nice to know if there are other tools to help test and debug editing of SVG Paths.
If you just want to quickly try out some SVG in your browser and not mess around with saving and loading files, jsFiddle is a great option.
Just use the following code as a template:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="your path data here"></path>
</svg>
I created a sample to work from here.
jsFiddle also supports frameworks such as D3, PaperJs and Raphael from a dropdown on the left-hand side.
A few places to test and tweak live:
http://vectorpaint.yaks.co.nz/
http://editor.method.ac/
https://github.com/SVG-Edit/svgedit
http://scriptdraw.com is no longer maintained.
You can use my helper web-page
http://naiksoftware.github.io/svg.html
Edit: your update didn't show for some reason before I posted this ...
Paste your SVG path into a text file with a .svg name, and open it in a browser.
Alternatively, create a small page like this
<html>
<head><title>My SVG test page</title></head>
<body>
<h1>My SVG test</h1>
<object id="SVG" type="image/svg+xml" data="MySvgTest.svg"
width="1000" height="1500"/>
</body>
</html>
and open it in a browser (see the Primer). It assumes your SVG is in MySvgTest.svg
Related
I'm trying to set up a simple a-frame physics demonstration that replays on click. Following basic examples from the aframe physics system and the orange shooter demo, I've simplified things to the code bellow which seems to work fine except for the rotation.set action. The block resets position, velocity and angularVelocity just fine but does not update rotation as it seems it should. Browser console message is Uncaught TypeError: Cannot read property 'set' of undefined
What would be the simplest way to set the rotation from within this script?
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-physics-system#1.4.0/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene physics background="color: #ccddff">
<a-box id="dropped" position="-1 4 -3" rotation="40 45 0" color="#5577D9" dynamic-body></a-box>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="brown" static-body></a-plane>
</a-scene>
</body>
<script>
window.addEventListener('click', function () {
// METHOD2 - MOVE THE EXISTING ORANGE
document.querySelector("#dropped").body.position.set(-1, 4, -3);
document.querySelector("#dropped").body.velocity.set(0, 0, 0);
document.querySelector("#dropped").body.angularVelocity.set(0, 0, 0);
document.querySelector("#dropped").body.rotation.set(40, 45, 0);
});
</script>
</html>
It is document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3);
This seems to work:
document.querySelector("#dropped").body.quaternion.set(0.3535533905932738,0.3535533905932738,0.14644660940672624,0.8535533905932737);
Apparently you have to use quaternions for rotations while physics is added, it looks like it overrides the native rotation. This works for getting one from degrees (45,45,0):
q=new THREE.Quaternion().setFromEuler(new THREE.Euler(THREE.Math.degToRad(45),THREE.Math.degToRad(45),0,'XYZ'));
And then:
document.querySelector("#dropped").body.quaternion.set(q.x,q.y,q.z,q.w);
But neither of this worked for me:
document.querySelector("#dropped").body.quaternion=q
document.querySelector("#dropped").body.quaternion.setFromEuler(e)
Where e is an Euler and q is a quaternion. Also the following works, albeit the result is not quite what you need:
document.querySelector("#dropped").body.quaternion=document.querySelector("#dropped").body.initQuaternion;
Should probably ask about it on A-frame github. Hope that this helps, happy coding ))
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm attempting to animate (transition) the “drawing” of an SVG path/line. The specific line I want to draw would be go 300px to the right, then continue 100px down, then 200px to the left. But it would be one single, continuous line with no curves or breaks.
Currently I can make it work by building the lines individually and applying a transition. Start at X1,Y1/X2,Y2--transition to new X2, Y2--for this duration, with this delay, and repeat, and repeat, and repeat.
Is there an easier way to do this? For example using a single SVG element rather than 3 and populate the X/Y coordinates from an array, for instance?
Any specific examples or pointing me in a general direction would be appreciated.
Thanks
This is entirely possible, though it's a little quirky to get the effect you want. It involves setting a very large stroke-dash-array (actually the entire length of your path) and then setting the dash-offset (also to the length of your shape). You set this up to the point that none of the line is originally visible, and alter the dash-offset such that the line comes into view.
There's a really good article on CSS Tricks SVG Line Animation that explains the principle. I wrote a little helper to do this for me in D3 that looks like this:
d3.selectAll(".draw")
.style("stroke-dasharray", function () { return this.getTotalLength(); })
.style("stroke-dashoffset", function () { return this.getTotalLength(); })
.transition()
.duration(3000)
.style("stroke-dashoffset", 0);
.draw {
fill: #232a29;
stroke: #232a29;
stroke-width: 2px;
fill-rule:nonzero;
fill-opacity:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500">
<g>
<g transform="translate(0,600)scale(1,-1)">
<!-- Circle -->
<path class="draw circle" d="m 97.44,308.52 c 0,90.53 73.42,163.92 163.98,163.92 90.56,0 163.98,-73.39 163.98,-163.92 0,-90.53 -73.42,-163.92 -163.98,-163.92 -90.56,0 -163.98,73.39 -163.98,163.92 z" />
</g>
</g>
</svg>
I have a javascript app (CAD like) build in SVG that have tools (objects build in SVG with Inkscape) that are inserted with the use tag. Everything works fine on Chrome and Safari (never tested in IE), but in Firefox, all objects that fill with gradients did not render. Like image below:
Firefox
Chrome
The tools are loaded like this (using external files)
<use
id="SvgjsUse1448"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="assets/images/neomap/tools/armchair.svg#armchair">
</use>
The gradients are defined in a separate svg inside the html page
...
<linearGradient xmlns="http://www.w3.org/2000/svg" id="armchair_SVGID_1_" y2="1911.6" gradientUnits="userSpaceOnUse" x2="1201.2" gradientTransform="matrix(1.0799475,0,0,1.2039969,15.269894,2.997636)" y1="467.91" x1="1201.7">
and apply like this
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" height="100%" width="100%" version="1.1" >
<defs>
<symbol id="armchair" viewBox="0 0 72000 54000">
<path style="stroke:#000000;stroke-width:6.84171867;stroke-miterlimit:10;fill:url(#armchair_SVGID_1_);" d="m2234.8,743.7s168.9,1406.4,0,1487.4c-188.77,90.42-1655.6,92.708-1844.3-0.4817-168.8-83.316,0-1488.9,0-1488.9v-182.09h1841l3.2398,184.09z"/>
...
</symbol>
</defs>
</svg>
It's a bug on Firefox? How can I workaround?
I had a similar problem and it turned out that mine was a real edge case, so I'm posting my solution here for the benefit of others.
My goal was to define a set of icons for later reuse in the document. I had defined the icons as nested svg documents inside a defs element:
<svg id="icons">
<defs>
<g id="atom-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#FDFDFD"/>
<stop offset="100%" stop-color="#CBCBCB"/>
</linearGradient>
<linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#B2E198"/>
<stop offset="100%" stop-color="#04A171"/>
</linearGradient>
</defs>
<g fill="none">
<circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
<circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
<path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
<path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
</g>
</svg>
</g>
</defs>
</svg>
Which I used elsewhere in the document like so:
<li title="Atom">
<svg><use xlink:href="#atom-icon"/></svg>
</li>
In order to prevent the big list of icons references from rendering on screen, I had applied the following styles:
#icons {
display: none;
}
This caused, of all things, the url references to linearGradients to stop working. Probably the browsers removed them from the DOM tree because of display: none or some such effect.
The solution was the change the styles:
#icons {
height: 0;
}
That's a Chrome/Safari bug you're relying on.
url(#armchair_SVGID_1_);
is actually shorthand for
url(<this file>#armchair_SVGID_1_);
but there's no gradient in the armchair.svg file.
The definition of what a base URI is is in RFC3986 section 5 which says
Within certain media types, a base URI for relative references can be
embedded within the content itself so that it can be readily obtained
by a parser.
There's a note in the CSS specification referring to this which I think makes a clearer statement (at least for CSS since this is the CSS specification):
For CSS style sheets, the base URI is that of the style sheet, not that of the source document.
The file armchair.svg defines a base URI the same as any SVG document or CSS stylesheet does, it's the absolute URL used to access it.
Webkit browsers get this wrong. There's this bug for the CSS stylesheets case of this issue.
Use an absolute url or put the gradient in the use file (but not in the symbol part).
It's really a Chrome/Safari bug.
I figured out, that the problem goes away if you remove all the hyphens from the linearGradient elements' IDs. Simple as that. SVG then works with groups too ().
I would be glad, if that helps somebody...
Firefox is behaving correctly according to the spec for the SVG <symbol> element. With SVG any element that are nested inside a <symbol> element or <defs> element are not directly rendered with CSS, even with a <use> element. Only their attributes are. You are using the style attribute, which is CSS inside the <symbol> element.
You must use the SVG fill attribute directly to have it work inside a <symbol> element. Even though you are using a SVG <use> element. It is referencing SVG graphical elements inside a SVG <symbol> element with the CSS style attribute, which will not be rendered according to the spec, since the CSS display property does not even apply to the SVG <symbol> element.
This is not a bug in Firefox, Firefox honors the spec whereas Chrome and Safari which use webkit, do not follow the spec and allow it for now. But they will soon follow the SVG spec.
See these references and the spec:
W3C <symbol> spec: http://www.w3.org/TR/SVG11/struct.html#SymbolElement
‘symbol’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘use’ element. The ‘display’ property does not apply to the ‘symbol’ element; thus, ‘symbol’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘symbol’ elements are available for referencing even when the ‘display’ property on the ‘symbol’ element or any of its ancestors is set to none.
MDN Firefox <symbol> element reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
The symbol element is used to define graphical template objects which can be instantiated by a element. The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility. note that a symbol element itself is not rendered. Only instances of a symbol element (i.e., a reference to a symbol by a element) are rendered.
The spec states that SVG elements inside the <symbol> element are not directly rendered. In that case you need to change the actually attributes of those elements inside a <symbol> element or <defs> elements. So just change the SVG fill attribute instead on those elements inside the <symbol> element.
Ok, this is a bug, but also an interpretation from the W3 Spec. In this section is specified two types of IRI local, and non-local.
local IRI references, where the IRI reference does not contain an or and thus only contains a fragment identifier
non-local IRI references, where the IRI reference does contain an <absoluteIRI> or <relativeIRI> and thus represents a reference to an element within the current document.
What I see, is that Chrome/Safari are more flexible when dealing with the specification, allowing the local IRI to reference an external document, if it not exist in the current document.
The point is, Chrome/Safari doesn't render the gradients of an external SVG file (loaded by reference, in a use tag) that are at the same external file, only if the gradients are loaded in the current main html/xml document.
So, I create two files for each SVG tool, one for Firefox, and one for other browsers. And now another problem as came up, for low values of transform: scale() in a g element, or small SVG elements, the gradient disappear (transparent), and this I believe is a bug.
I'm facing a problem that I thought would have been easier to solve than it actually is.
I want to create a puzzle with 4860 pieces for a game. The mesh of the puzzle is made with SVG. Below I'm reporting part of the code, just to give you an idea. The code is working as you can see in the last link I gave you.
I created in defs a list of paths (18 in total), then a long list of 4860 so that I can make my puzzle.
When the mouse moves over one piece, I want this piece to be highlighted.
That's the code (first part), followed by a series of tags like the one in the example.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="1200" height="1200" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<style type="text/css">
.use1 {
stroke: #000000;
fill: #ffffff;
fill-opacity: 0.1;
stroke-linecap: butt;
}
.use1:hover {
fill: #ffffff;
fill-opacity: 0.8;
stroke: #3273BE;
stroke-width: 10;
}
.base {
}
</style>
<path id="a0" d="m152.199493 121.414993c-0.349991 2.4 -0.3 4.8 0 7.169998c1.200012 8.3 6.6 15.9 16.3 17.419998c12.858994 2 14 -5.5 23.2 . (...) "/>
.... the other 17 paths .....
</defs>
<image x="0" y="0" width="1200" height="720" xlink:href="lana-del-rey-ultraviolence-recensione.jpg" />
<use xlink:href="#C5" x="-50" y="-50" transform="scale(0.088) rotate(0)" class="use1" id="1"/>
....
... x 4860 ....
....
</svg>
You can see the result here:
http://www.ridiesorridi.it/puzzle/17.svg
If you open it in Safari or IE it works PERFECTLY with no lag. If you open in Chrome or Firefox to highlight a piece it's extremely slow. You can imagine when I put this SVG inside an HTML page ... !! Instead in IE and Safari it keeps working great.
My question is: how can I solve this problem with Chrome and Firefox?
I've already tried to remove extra decimals (to "optimize svg") but it didn't work.
Edit I noticed that in Chrome and Firefox, if I zoom in (like 400%) it works PERFECTLY. Once it has all the elements together, it keeps having problems (compared to IE and Safari)
Reducing accuracy would only help parsing speed. Once the SVG was parsed, it shouldn't make a difference.
I am not sure what, if any, optimisations FF and Chrome use when testing hover for SVG elements. But I would certainly try reducing the complexity of the pieces. For instance, the piece "g1" has 89 path commands in its definition. You should be able to reduce that by 4x, at least, and still get an accurate jigsaw piece shape.
I embedded an SVG object in an HTML page as follows:
<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg"
type="image/svg+xml" />
However, the resulting image (both on Firefox and Chrome) is trimmed and it look like that:
(Notice how "Step Response" and "Time" do not appear properly). I have checked the file on the server side and it is fine. Any ideas?
Having had a second look at your code your svg image is still too small.
You need to set the height to 100% and the image height to 500px.
<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg">
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
....
This fixes the problem in firefox v8.0
Just tweak your viewBox attribute so that it fits your image.
For example, you could try this:
viewBox="-10 -10 596 452"
Update:
To generate the viewBox dynamically with JS, something like this should work:
var bbox = document.documentElement.getBBox();
var viewbox = document.documentElement.viewBox.baseVal;
viewbox.x = bbox.x;
viewbox.y = bbox.y;
viewbox.width = bbox.width;
viewbox.height = bbox.height;
Note that this needs to be done on the svg document, so you may need to reach into it from the html document that embeds it, if so have a look at this example.