How to show a subsection or "slice" of an SVG graphic?

Question

Is there any way to slice an SVG . I mean any already available lib . I need to implement this slicing component in Java.

I mean , I have single SVG file and based rulers/scales i choose graphically , I want to slice the single SVG into different SVG files.

Hope I am clear

Marler

Define "slicing" do you want to produce graphically separate parts or store logically separate files? Or ...? – Franciskus

Answer 1

Yes, although, you'd think this was classified information - or just simply impossible - based on how hard it is to find this basic fact....

Apparently, all you need to do is reference the viewBox from a URI "fragment".. I have confirmed, it does indeed work. Take the following example... The lesson of the story, in case you miss it, is... image.svg#svgView(viewBox(100,100,100,100))

image.svg is defined as <svg .... viewBox="0,0,400,400" width="400" height="400">

http://example.com/image.svg

http://example.com/image.svg#svgView(viewBox(100,100,100,100))

Persecute

This is amazing. It basically means one can us a single SVG file as a a sprite. I'm curious about the browser support for this. – Hurty

Answer 2

If you're working with SVG in Java, the Batik SVG Toolkit will provide a lot of functionality (I confess I don't know what you mean by slicing, however)

Arlinda

I have tried Batik , but it does support SVG slicing operation. – Marler

Answer 3

All you have to do is edit the <svg> tag. Edit width and height, set the viewBox attribute on the main svg element to the rectangle you want, render, repeat.

Each svg will contain all the data from the original but will only display the part of the drawing inside the viewBox. See http://dingoskidneys.com/~dholth/svg/

viewbox = "x y width height"

Bind

I need to , slice a bigger SVG and turn them to mulitple SVGS. eg : I have a big picture , and i divde the whole rectangle into 9 rectangles based on my selection and the output should be these new 9 SVG files , made of content inside these rectangles. I hope I am clear ? – Marler

It makes sense. As long as you don't mind that the slices are the same size on disk, viewBox is all you need. – Bind

it's not a slice if you have to eat the whole pizza 8 times. – Persecute

Answer 4

If your goal in slicing the svg was to create 'hot links' or an image map .. this is how to do it!

Simply slice the svg in Illustrator then when saving ('Save As') the svg, be sure to nab the code ('SVG Code' at bottom) which will include slice references such as:

<rect id="_x3C_Slice_x3E__1_" x="88" y="22.5" class="yj4" width="227" height="88"/>

which are LINKABLE by surrounding with a link tag:

<a href="#"><rect id="_x3C_Slice_x3E__1_" x="88" y="22.5" class="yj4" width="227" height="88"/></a>

Hope this helps.

Rattigan