Creating an SVG file from a pattern 1

[Lyell]

This is a follow-up to my previous question -- wanting to create a pattern from just part of an Illustrator drawing. Thanks to your help, I can now get this to work. However, now I want to create an SVG file from that same part of the drawing. But when I save, I get the entire drawing, not just the part I want to use as a pattern.

[I used the same file that I'd created the pattern from, select all the same elements including the invisible rectangle underneath, then saved as an SVG. Same problem whether I specified "preserve Illustrator editing capabilities" or not. I'm using Illustrator CS3 on a Windows XP machine.]

 

[apepp]

...different approach is required here...

...with that same bounding area you have used for the pattern area, select it, choose object > crop area > make...

...then save to svg again, click on the web preview button in that save dialog will give you a browser render of that cropped area...

...if happy, back to illustrator and save it somewhere...

...to get rid of this crop area, go straight to object > crop area > release...

Andrew

 

[Lyell]

I'm missing something, I can't quite get it to work. I select the bounding box, then object -> crop area -> make, then give it a name, specify SVG, and press enter. But on the next screen, if I select Web Preview, I get a blank screen. So I go ahead and save it, and when I look at the SVG file in the Bridge, it looks wonderful -- everything I want and nothing I don't. But then when I open the SVG file again, I get the whole deal, including all the stuff I don't want. What am I doing wrong, or not doing right?

 

[apepp]

...firstly, i take you have installed the SVG viewer for your browser from adobe:

http://www.adobe.com/support/downloads/product.jsp?product=46&platform=Windows

...also, SVG will maintain all elements outside the crop area, in a browser the crop area is correctly defined, this is the way it works...

...if you really want to crop everything permanently then you have to do that in illustrator first by way of the pathfinder palette crop function, see this post i responded to for further assistance on this feature:

http://www.tek-tips.com/viewthread.cfm?qid=1480804&page=1

Andrew

 

[apepp]

...forgot to mention...

...the other method of previewing SVG is in the save for web and devices dialog...

...choose file > save for web and devices, then change the pull down menu to SVG (not the 'preset' menu, the one below it)...

Andrew

 

[Lyell]

Still no luck when I tried following the pathfinder palette crop instruction BUT I think maybe I know what the problem is.

The shape that I'm trying to crop is the result of four paths connected using the object -> path -> average function (does this makes it a complex path?) I tried following your instructions using simple objects and everything worked.

And if it doesn't work on my complicated path, I guess I can see why not -- if those paths were cut apart the shape wouldn't be what I wanted.

Is that it -- that I can't crop this complicated path of mine?

 

[apepp]

...have you tried expanding all elements (don't select the object that is the crop area)?

...object > expand, or object > expand appearance might both be required...

...another way to outline paths is to object > flatten transparency, outline strokes needs to be on...

Andrew

 

[apepp]

...in short, strokes often need outlining for the crop feature to work as desired...

Andrew

 

[Lyell]

Okay, I'm almost there -- thank you! The expand worked and let me crop out the parts I didn't want, but it left me with one problem.

My shape is really one stroke inside of another stroke, with no fill. After the expand/crop, the object looks fine but I no longer can edit each stroke separately (which is a project requirement).

I tried different combinations of stroke and fill for the expand, but nothing worked except both stroke and fill. I also tried various settings for flatten transparency (with vectors at 100%) but same problems, resulting in both strokes combined into one.

I sure have appreciated your help on this -- you've taught me several new techniques.

Maybe I should go back to my original shape and see if I can convert it into one stroke and one fill instead of two strokes.

 

[apepp]

...when you indicate that edits are required, what might these edits be, changing colors, changing thickness, moving, or unknown?

...is this stroke created using the appearance palette function, (flyout menu > add new stroke)?

...once strokes are expanded they become outlines, so are no longer a stroked path, more a vector shape...

...be handy if you can post a screen shot of your shape, or better still, post me a download link of this illustrator file via the free sendspace site, send it to your own email, then copy and paste the link from the email you receive:

http://www.sendspace.com/

Andrew

 

[Lyell]

You're great to help me this way, Andrew. Here's the file at:

http://www.sendspace.com/file/r9pztg

The area I want to save is the lacy effects contained in the medium gray square (the bounding square is at the bottom underneath the gray square).

The only edit the recipient needs is to be able to change colors, both the inner stroke and the outer stroke. No need to move or change the strokes' thicknesses.

Yes, the inner stroke was indeed created via the appearance palette function, (flyout menu > add new stroke).

Regards,
Lyell

 

[apepp]

...have downloaded file now...

...the end user would change the colors by what method?

...downloading the SVG and opening in illustrator or by some other means?

Andrew

 

[Lyell]

Unfortunately, I don't know thye details of how they'll be used. Background -- I'm part of a website of color lovers: we create and share palettes of four or five colors, discuss color trends, give advice on color schemes for websites or home decor, etc.

Recently, a new feature was added -- patterns that could be colored using favorite palettes. The palettes are in shades of gray, and the members choose to replace each one of the grays with one of their own colors. We can submit our own patterns for consideration -- must be .SVG files, tileable, composed of no more than for specifics grays plus black (#000000, #333333, etc.)

If your palette is accepted, the site developers perform some behind-the-scenes magic to prepare a pattern for the users to fill with their own colors. And I don't know what that process entails, but I know the developers must be able to access each one of the pattern' gray shapes as separate editable entities. And I would guess this would involve opening the file in Illustrator.

I may not have explained this well, but you could take a look at the site:

http://www.colourlovers.com/

If you click on the top tab "Patterns" and then click on the submenu "New", you'll see the type of patterns I'm talking about.

 

[Lyell]

... more to clarify above ...

The developers would have to be able to edit all the elements in Illustrator, but the end user (the person coloring the pattern) never would. Instead, the end user would use the magic provided by the developers.

 

[apepp]

...OK...

...with closer inspection, after crop it is still possible to change the colors of what were two strokes independently as global colors are assigned, so it is a case of modifying the global color in the swatches palette...

...the strokes do become separate areas, so you can select an area, then choose to select > same > fill color, then group them, press apple/control + 3 to hide it, then pick another area, do the same, until you have all areas grouped and invisible...

...to get them back into view, press control/apple + alt/option + 3...

...in the layers palette you then have groups indicated...

...select the circle in the layers palette next to each group, press apple/control + 8, this turns it into one entity, or a compound path to be exact...

...like this one I have uploaded:

https://share.acrobat.com/adc/document.do?docid=a75a2a68-d24d-43e6-933b-c8568c2d7d02

Andrew

 

[Lyell]

Andrew, thank you very, very much. I'm not sure I understand yet how you did all of this, but I've saved a copy of this total conversation so I can study it and gradually understand.

Meanwhile, you've solved the problem and I can submit the pattern.

Consider me your admirer for life!
Lyell

 

[apepp]

hi lyell,

...thanks for your favorable response above...

...and yes, illustrator is a pretty complex program, the tools are there, just sometimes you have to perform several steps to get where you want to be, once you have played about with features, thinking a couple of steps ahead by knowing what is possible and where these functions are, you can begin to make sense of the best approaches for a given task...

...i always encourage the try and see approach if i can...

...can be a brain bender with very complex vectors paths...

...i will check back at the color site to see if your pattern is in circulation...

Andrew