I'm using svg-edit.googlecode.com. Is it possible to make animation in SVG? i need to animate an Image in a game which will be rotating its head. I have 10 frames of images for animation, but I dont know how to bring it into svg for Animation.
Need Help to make my Game Character to Animate by SVG.
<svg width="512" height="320" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
</g>
</svg>
Related
I am animating svg elements using <animate>. Is there an equivalent property to the animation-play-state property in CSS animation in SVG animation? I've looked at this documentation Mozilla docs and it seems that there isn't one, but I just want to make sure.
This website Introduction to SMIL animation in SVG is useful. From it I learned that beginElement() and endElement() in a JavaScript script, can be used to start and end animations.
The begin attribute should be set to indefinite. An example is shown below.
JS
function start(id){
D.getElementById(id).beginElement()
}
SVG
<ellipse fill="lightpink" onclick="start('A')" cx="40" cy="140" rx="22" ry="14">
<animate id="A" attributeName="cx" dur="3s" begin="indefinite" values="40;400;40"/>
</ellipse>
If an animation tag A contains the attribute end="indefinite" then A.endElement() will succeed in terminating that animation.
Also, a JavaScript call to document.documentElement.pauseAnimations() will stop all SMIL animations within an SVG document, freezing objects at their current position.
document.documentElement.unpauseAnimations() resumes SMIL animations from whatever position they were paused at. More about pauseAnimations() and unpauseAnimations() here at W3C and MDN Docs: SVGSVGElement.
See reproduced example here - https://codepen.io/canovice/pen/eYRmYKR - command + P to print, I've taken this screenshot of the print/pdf output:
Problem: On web, both images are sharp. On print and save to PDF, the logo in the <img> tag remains sharp, whereas the logo in the <svg> using <svg:pattern>, <svg:image>, <svg:rect> with the fill attribute, is blurry.
Purpose: Our web app has many SVG graphs (think scatterplots) that use the team logos in place of the scatterplot dots. We want users to be able to print these graphs, and save these graphs to PDF, with sharp images. Here's a screenshot of the graph on web, with the sharp logos. When we save this as PDF, we get blurry logos.
We are using react.js and d3.js to build our web app and create our svg graphs, although we are hoping for a solution specific to the html & css of SVG elements.
Wrapping a raster graphic image inside a svg name does not make it a true scalable vector graphic. The method used is a "gradient fill with image" thus not as efficient as using true SVG objects with true colour gradient fills.
To get png in svg wrapping keep it simple
<div>
<svg width="2000" height="2000" >
<rect x="0" y="0" height="1000" width="1000" style="fill: #f0fff0"/>
<image x="30" y="00" width="160" height="160" xlink:href="103735.png" />
<image x="300" y="50" width="160" height="160" xlink:href="103735.png" />
</svg>
</div>
I'm using a big svg that contains flags of countries, eg
<symbol viewBox="0 0 640 480" id="flag-be">
<g fill-rule="evenodd" stroke-width="1pt">
<path d="M0 0h213.34v480H0z" />
<path fill="#ffd90c" d="M213.34 0h213.33v480H213.33z" />
<path fill="#f31830" d="M426.67 0h213.34v480H426.66z" />
</g>
</symbol>
It works great and I can simply svg use #flag-be and voila, got a my flag.
<svg class="icon flag-be"><use href="#flag-be"></use></svg>
However, I'd like to add a border around the flags (because some that have a lot of white looks strange without it), ideally something that can be set via css only
It works fine when I have each flag into separate svgs (using border), but I failed to make it work when I use several flags as part of a single svg containers (a graph)
What's the easiest? whould I add a a new element in each symbol for the border? What's the most flexible to style "used" symbols in a svg?
Neither <svg> nor <use> nor <g> elements are graphical elements. Trying to set a style altering the graphical appearance on them will only lead to the style being inherited by its children. So, if you set a stroke on <use>, it will be inherited by all the path elements, and you get a border around every flag field.
(A point to remember: Content cloned with a <use> element can inherit styles, but they cannot be targeted with CSS selectors.)
So why does setting a border work on the outermost <svg> element? Because that element is treated as part of the HTML namespace and rendered as if it was an ordinary <span>, while for its children in the SVG namespace the border property has no meaning.
In your use case, you need to add a graphical element surrounding the whole flag. Probably at the point of use, like this:
<svg ...>
...
<svg class="icon flag-be" width="24" height="16">
<use href="#flag-be" />
<rect width="100%" height="100%" style="fill:none;stroke:black;stroke-width:1" />
</svg>
...
</svg>
Note the inner <svg> element. Its purpose is to give a reference to the percentage width and height of the <rect>. Otherwise, they would be computed in relation to the outer <svg>.
Currently, width and height must be set as attributes on an inner <svg> element. SVG 2 defines them as presentation attributes that can be set with CSS, but some browsers still only allow that on outer <svg> elements.
I'm working on a drawing app that uses a background image. The container and background image are scaled with the browser window.
However, the lines that are drawn are not scaling with the container/background. So something that goes from 1,1->50,50 on a 100x100 drawing, ends up going all the way across the image if the browser scales the image down by 50%.
Is there are markup for paths that enables such scaling to work (example svg below).
I've tried preserveAspectRatio and setting the viewBox.
<svg>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./background.svg" height="100%" width="100%"></image>
<g>
<path class="shot" d="M243,190 L650,199"></path>
<path d="M242.77892382381336,199.9975559675514 L649.7789238238133,208.9975559675514" class="shot-parallel"></path>
</g>
<g class="active">
<path class="shot" d="M269,321 L411,368"></path>
<path d="M265.8577860915356,330.49349734046694 L407.8577860915356,377.49349734046694" class="shot-parallel"></path>
</g>
</svg>
I have a PNG file with lots of icons on it. I want to use it in my SVG. I use the svg:image tag:
<image xlink:href="icons.png" height="50px" width="50px"></image>
This renders the whole image. How can I specify the portion of the file to be rendered? (I need an SVG-equivalent of CSS's background-position attribute)
Update
I suspect preserveAspectRatio attribute to be what I need, but can not figure out how to use it with <image>. See this example.
You can use preserveAspectRatio to achieve this affect in a limited way. But you are limited by the positioning options that preserveAspectRatio provides. So as long as your sprite has a maximum of 3x3 images or are positioned at the corners or sides, it would work.
The are a couple of other ways I can think of to achieve the same effect in a more flexible way.
Use the clip or clip-path style properties along with careful positioning of the image on the page
Embed the image inside another <svg> element and use viewBox to select the part of the sprite you want.
The following example demonstrates the three main techniques above.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 400 400" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Testing image elements</desc>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="398" height="398"/>
<!-- Use preserveAspectRatio to show the top 64 pixels of the image (Stack Overflow logo) -->
<image x="100px" y="100px" width="238px" height="64px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
preserveAspectRatio="xMinYMin slice"/>
<!-- Use a CSS clip rectangle to show a small facebook logo from the sprite. Logo is at 150,1000 with dimensions 19x19.
Positioned at 100,200 in the SVG (-50+150, -800+1000). Could also use a clip-path for this. -->
<image x="-50px" y="-800px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
clip="rect(200 100 219 119)" />
<!-- Use a svg viewBox to show the facebook logo from the sprite.
By setting our viewBox to the bounds of the logo, the renderer will scale it to fit the specified width and height.
Which in this case is 19x19 - the same size as the sprite. -->
<svg x="100px" y="300px" width="19px" height="19px" viewBox="150 1000 19 19" version="1.1">
<image x="0px" y="0px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" />
</svg>
</svg>