I've looked at http://www.adobe.com/devnet/flex/samples/fig_panzoom/ for pan & zoom, and it does a very good job of it. However, it only works with raster images. Does anyone know how to modify this for vector images (SVG converted to SWF).
My limited attempts have not gone well, as the Imageviewer.as class is clearly designed around bitmaps.
I can load the SVG images in an Image, but I'd really like to pan & zoom too.
Thanks.
Have you looked at OpenZoom? AFAIK it supports anything that can be loaded on the stage.
Related
I have created 20 webpages full of charts for a client. They want to print them as part of a publication so I am needing to turn SVG into EPS.
I've imported a large d3-generated SVG into Illustrator. The CSS is inline so most of the formatting has come through (thanks to this answer: Can I turn SVG and external CSS into EPS?). However there are two problems. One is that three out of four x-axes are replaced by a thick black line. The other is that some of the data (three lines on the bottom right chart) are completely missing. Does anyone have any clues as to what is wrong?
I have looked through the CSS in the hope of finding something that favours one particular axis or tick but can't see anything. I can't share the SVG or page because it's driven by client data, which is confidential.
Grateful for any help
Emma
Original SVG:
New Illustrator EPS:
In case anyone else has the same problem, I thought I'd post how I worked this out. The problem was CSS-related. Illustrator renders CSS differently, and applies slightly different rules to my text editor. In particular:
class names containing underscores are ignored;
font-size using vw are ignored;
where two opposing CSS rules apply, it seems the first rule is taken (haven't tested this properly)
CDATA declarations have to be within the svg tags
Sometimes the path to the element has to be spelled out far more clearly than a browser would require
A bit late to the party but I noticed such artifacts as well with Illustrator. If you open the SVG in any other browser it works fine. My solution was to use InkScape and then re-save the SVG files. After this Illustrator handles the SVG well.
This isn't exactly an answer to your question, but if you're only looking for an image that's of a high enough resolution to print, and don't necessarily care about it being vector vs. raster graphics, you can always use a high-resolution screen (if you have a 4K/5K screen laying around, use that, but an iPad may do the trick too), zoom in so that each SVG chart takes up as much of the screen as possible, then take a screenshot. If you're doing an extremely large high-quality print of just the chart, it may not work, but as long as it's a smaller piece of a larger document, you'll likely get a large enough image that it being raster graphics won't affect the quality of the printing.
This approach certainly has its disadvantages, but it's relatively quick, simple, and gets the job done.
EDIT: It looks like printing to a PDF will also preserve SVG graphics, and (at least on my computer) there doesn't appear to be any differences between the two images. Once it's in PDF, you'll be able to import into Illustrator pretty easily, and extract the actual SVG graphics from there.
What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.
Does somebody know if there is a library (or something like a library) that allows me to create text annoted vector graphics (preferably on the basis of svg or raphael) with the feature to pan over these graphics and zoom into them and, when I zoom into, shows more and more details, or, when zooming out, shows less details so that the image is not cluttered with details that are irrelevant for a particular zoom level.
I am aware I could do the panning and zooming with setting a corresponding viewport, but this would still show details that I don't want to see on a zoomed-out level.
Thanks for any pointers.
SVGPan is a small script for this pourpose:
http://code.google.com/p/svgpan/
demo page:
http://www.cyberz.org/projects/SVGPan/tiger.svg
There is a solution provided here using Raphael
http://dashasalo.com/2011/04/13/svg-image-zooming-and-panning-with-raphaeljs/
We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.
I was looking a component to reduce red eye effect on taken photos. Ive found an image Processing library, but it does not work well at all. I was thinking on brush an image, manually, and only paint if the base pixel color its red or near in RGB.
Have no time now to explain all the process, but i need help to get this idea, or to get a working comp
Thanks in advance!
If you are wishing to manipulate the pixels of an image/component then pixelbender would be a pretty good way to go.
Have a look at http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26 for downloadable examples.
These can be run using the toolkit found at http://labs.adobe.com/technologies/pixelbender/
Video tutorials on pixel bender can be found at http://www.gotoandlearn.com/
With this you could change just the required pixel colours to anything and it works with everything in flash (images, canvas, button's etc)