posts tagged with the keyword ‘svg’

2012.11.27

Tennis Man

Here’s a thing I’m calling (for lack of a better name) “Snowflakey”. The idea came from the Kimotion Arts store on Shapeways.

Kimotion Arts

Kimotion Arts has these neat 3D printed ornaments with an object arranged in a circle to make a snowflake-like thing. I dig it, so I decided to dig into it.

Bad Man

The first thing I did was fire up Inkscape and draw a really simple figure. It’s terrible, really, but I did it in less time than it took Inkscape to launch of Mac OS X. I created an SVG file, and then exported it as a DXF file, making sure I converted all the line segments into straight lines first. (Of course there were no curves in this drawing, but if there were, I’d convert them!)

Bad Man Flake

Once I had my DXF file, it was easy to pull that into OpenSCAD, and place six of them in a circle with the following code.


objheight = 4;
objcenterspacing = 20;
objrotate = -70;

for (i = [0:5]) {
  rotate(i*360/6, [0,0,1])
    translate([0, objcenterspacing, 0])
      rotate([0, 0, objrotate]) 
        linear_extrude(height = objheight, center = true) 
          import( "figure.dxf" );
}

The code is not the greatest… in fact there is probably much room for improvement, but it’s the first thing I got working, so I ran with it. My idea for the 3 variables at the top were so you could easily tweak them for different art. Sadly, as you change objcenterspacing and objrotate, they affect each other, so it’s a lot of back and forth between those two values. I also could not find a way to assign a filename to a variable, so your DXF will need to be named “figure.dxf” or you’ll need to edit the import line.

Tennis Man

Since my drawing was so terrible I wanted to try something else, so what better than Land recreation symbols 27, better known as “Tennis Man” by most people.

Tennis Man Flake

A few quick edits and I had this nice Tennis Man Snowflake for that special ball smasher on your list… (Notice the canvas size of 25mm wide by 35mm high. You can do what you want, but the OpenSCAD code will be expecting something close to that. Otherwise you’ll just have to tweak the numbers even more.)

Blobby Man Flake

I decided to try once again to draw something. This one too a little longer than a minute, but turned out just as terrible as the first one I did. Still, maybe you like “Blobby Man” as a snowflake.

Ant Flake

How about ants? This one is interesting. Maybe spiders would have been a better choice. (And yes, I know I could probably do the entire “6 items rotated” think right in Inkscape, but that wasn’t the goal here.)

Horse Flake

What about the old nag? No, I’m not taking about your mother-in-law (kidding!) but this fine old horse from OpenClipArt.org, where I get many of the SVG files I use. Export this as an STL file and you’re ready to print it on your RepRap!

If you’ve got an improvement to this OpenSCAD code, by all means, let me know. I’m still very much in the learning phase with OpenSCAD, so I do these things to learn, and because of that I’m open to any suggestions.

2012.04.18

SVG file in Inkscape
SVG file in Inkscape

After my last post on the subject, Laser. Cut. Files. (Part II), I figured that I had something that worked… but then something came along that worked better!

Thanks to a comment from old pal Thomas Edwards on the Part II post:

Have you tried Inkscape Save as EPS, then Preview EPS to save PDF? (Inkscape Save as PDF might work as well, but I find Corel Draw gets messed up by fonts unless I start as EPS and then go to PDF)

I decided to give PDF files from Inkscape a try. They didn’t work. CorelDraw gets some crazy error trying to open PDF files I create in Inkscape on Mac OS X… but what did work was a two-step process!

Again, my goal is to do all of my design work on Mac OS X, typically using Inkscape, and then moving my files to the Laser Cutter PC running CorelDraw on Windows (yuk!)

PDF file in Preview
PDF file in Preview

So for now, my process is the following:

  1. Create vector art in Inkscape
  2. Save (original) file as an SVG
  3. Save (a copy of the file) as a PDF from Inkscape
  4. Open the PDF from Inkscape in Preview and Save as a PDF
  5. Copy the new PDF file to Laser Cutter PC
  6. Open a new document in CorelDraw and import PDF file

Save as a PDF (again!)
Save as a PDF (again!)

Windows and Linux users, your mileage may vary, and obviously you don’t have Preview.app, but on Mac OS X this process works for me. And as for the note in the comment from Thomas about fonts, I’d be sure to convert any fonts into outlines after I save my SVG file, but before I save my PDF file. (It’s an old print design trick.)

2012.01.30

NOTE: See the latest post on this subject: Laser. Cut. Files. (Part III)

In our last adventure, Laser. Cut. Files. I thought I had it down… sadly, I was wrong, and I’ve actually updated that post, and here’s a Part II to share more of what I’ve learned.

Inkscape DXF

This time I once again started with Inkscape, which creates SVG files. From there I export to a DXF file. This is, I guess, not ideal, but it sort of (mostly) works, so I’m still trying to perfect it. Mostly.

The issue I mentioned last time involved exporting a DXF file from Inkscape and then not being able to re-open or import that DXF back into Inkscape. I’d get some weird error, which I thought might be due to too much extension madness in Inkscape. Anyway, I ended up re-installing Inkscape and now I can open DXF files, but they just show up blank, so that’s not much better.

I did however finally find an application for OS X that allows me to easily open and view DXF files: SolidWorks eDrawings. This should help me see what crazy stuff happens to my DXF files between Inkscape on the Mac, and CorelDraw (yuk) on the Laser Cutter.

Here’s my most recent file loaded into SolidWorks eDrawings.

DXF File

Hey, look at that! I can view a DXF file on my Mac! And it was much easier than last time, where I screwed around with OpenSCAD to do it.

DXF File

But wait… as we zoom in, we can see that when the original Inkscape SVG file was exported as a DXF, it did that crazy thing again where it changes curves into lines! (Argh! I know that there are times when you want this for CNC things, but this isn’t one of them… and if I wanted them, I could do it myself. In fact… maybe I’ll just start doing it myself if I have to.)

For this control panel, it didn’t really matter, since the front of the button will be covering up the hole, but I’m still not happy with the results… And just so we’re clear, the results I want involve me doing the digital design in tools I can run on my Mac (that I like using) and then getting those files onto the laser cutter PC with minimal screwing around, and just doing my lazzoring.

A simple, clean, friction-free, non-annoying process that doesn’t involved having to mess around redrawing things in CorelDraw (yuk) because really, it seems like it shouldn’t be this hard.

Oh, and as for the Laser Cutter PC, Inkscape got installed, but I couldn’t get it to work with the Laser Cutter. Illustrator 8 was also installed, which can’t read SVG files, and couldn’t open my DXF files either. So sadly, for now, it’s that damn CorelDraw…. yuk.

2010.12.01

I’m in need of graphing some data, and since I looked at the Google Chart Tools long ago but never did anything interesting with it, I figured I’d give it a spin.

Google’s API is pretty simple to use, you feed it a URL, and you get an image in return. Here’s an example expanded out a bit:


http://chart.apis.google.com/chart?

  cht=lc&
  chs=600x400&
  chg=10,5,5,5&
  chco=ff0000&
  chxt=x,y&
  chxr=1,0,100,5|0,0,24,1&
  chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2

Each parameter controls some part of the image you get returned. (Want to see it? View the URL.)

You should get something that looks like this:

Chart

Wow… but not really. This is probably one of the simplest examples of a chart, but it serves my purpose.

Of course, since I’m not always content relying on others to host my data, I wanted a way to generate and store the image. You can do that too…

curl -o 20101130.png 'http://chart.apis.google.com/chart?cht=lc&chs=600x400&chg=10,5,5,5&chco=ff0000&chxt=x,y&chxr=1,0,100,5|0,0,24,1&chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2'

Just use curl to make the request and store the image in a file named 20101130.png (or whatever the date is, or file name you’d prefer.) Obviously you’ll need curl installed. If you need to generate a new chart everyday this is ripe for automating.

I also looked at jQuery Visualize as an option. It’s quite different than the Google Chart API as to how it functions.

Chart

With jQuery Visualize you don’t actually create a chart. Well, you do create a table of data, and jQuery Visualize does all the heavy lifting and creates the chart based entirely on your well-formed tabular data.

I sort of like this approach because there’s no external image files to generate, host, or worry about. You just make a table, and include a bit of Javascript. (Of course there are other concerns/issues, but simplicity is pretty high.)

I’m still evaluating what my final choice will be for my current project. If this were 10 years ago, I probably would have used Perl to generate the image files. If it were 5 years ago, I probably would have used Perl to generate some SVG files…

jQuery Visualize uses the HTML 5 Canvas element, so they get some points in the “innovation” column I guess… Also, jQuery Visualize requires less math, and in my world, the less math I have to do, the better!

2004.12.09

[Editor's Note: If your browser does not support SVG images, you should be seeing PNG images instead, which will not look as good as the SVG versions. If you don't see any images, let me know what browser, version, etc. you are using. It seems some of the popular browsers out there don't "do the right thing" hmph!]

[Editor's Note Part 2: Seems that RSS 2.0 can't handle the <object> tag properly? At least that's what the validator tells me. The Atom feed seems ok though...]

I’ve been working on some simple graphing utilities in Perl to create SVG graphs… Here’s a few samples…

graph

Our cost for phone service seems to have gone down.

graph

Local utilities continue to rise. Ugh…

graph

We’re spending less on food, well, most of the time. ;)

I like the fact that these are very simple, showing just the trend and not going into details like month, amount, etc. In fact, to create one of these just takes the following:

perl ggraph2.pl "Phone" "44 54 50 53 44 41 43 53 42 42 44" >phone.svg

Run the script passing in the name you want on it, and a string of numbers space separated, and output it to a file. It’s still a bit fragile, and only does some basic normalizing, so wacky things will break it, but it’s a start. Like all other quick little hacks, in the hands of the guy who wrote it, it “gets the job done” while users would break it in less than 10 minutes and start yelling.

I really like SVG. It reminds me of the old days of plotting out graphics on the Apple ][+ and that’s a good thing! It’s another one of those “edge technologies” I keep hoping will finally catch on big one of these years…

|

buy the button:

Buy The Button

recently at:


top recent artists: