Quick & Dirty: Exporting Images Tip

Share your Inkscape tricks and tutorials here.
User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Quick & Dirty: Exporting Images Tip

Postby BobSongs » Tue Jun 07, 2011 4:22 pm

My Quick&Dirty tutorials require a W3C-compliant browser, such as Google Chrome, Opera, Apple's Safari, Mozilla Firefox or the light-weight Seamonkey. Each of these programs does what Internet Explorer does, but they display webpages more accurately.

Tip on Exporting

I'm assuming you've got Inkscape running.
I'm also assuming you've got some basic knowledge of how to use Inkscape.


preamble
It seems many Inkscape users are under the impression that all objects in an Inkscape document must be selected in order to export to a bitmap (PNG file, in Inkscape's case).

I've drawn a very simple document below: a rectangle, ellipse, spiral and star. The ellipse is just a tiny bit out of the definition of my page (250 pts by 250 pts), and that's deliberate for the sake of understanding how Inkscape works.

Image

The ellipse was the last thing drawn. Let's begin exporting. We'll use the .PNG format.

Export: just the rectangle selected

The grey rectangle was clicked once making it the only object selected. Let's perform an export:

From the toolbar: Image
From keyboard: Ctrl + Shift + E
From menus: File Export Bitmap...
  • Export Area: leave it at "Selection"
You'll notice, in the Export Bitmap dialog, the last option at the bottom says:

    [ ] Hide all except selected
Let's leave this option off for the moment. Now choose a file name & location and click Export and close the box.

Inkscape exports this:

Image

Leaving the rectangle selected, hold the Shift key and click the ellipse. With both rectangle and ellipse selected, repeat the export steps above. Open the new PNG file and you should see this:

Image

And when the rectangle, ellipse and spiral are selected:

Image

Note that at no time is the star selected when exporting.


what's the point?

If I were to work on a desktop background set to 1680 x 1050 covered in artistic swirls, spirals, shapes and so forth: I may wish to have one of the larger swirls leave the side of the 1680 x 1050 base rectangle and return again elsewhere. A star may make only a partial appearance on this work of art.

If I select all items in my document and then export them, the final export will exceed 1680 x 1050.


how else can I achieve this?

Let's continue with the 1680 x 1050 desktop idea.

We could easily begin by changing the document's size:

From the menus: File > Document Properties...
From the keyboard: Ctrl + Shift + D

On the first tab (Page) in the centre is the Page Size. Underneath the list of choices is "Custom Size".
  • For "Units" select PX.
  • For "Width" select 1680 (or any width you prefer)
  • For "Height" select 1050 (or any height you prefer)

Now I create a base rectangle of 1680 x 1050. I can add many objects that extend outside the page size. When I decide I want to export my work of art, I begin as usual:

From the toolbar: Image
From keyboard: Ctrl + Shift + E
From menus: File Export Bitmap...
  • Export Area: Here's where we change it from "Selection" to "Page". That's right, click Page to the left of Selection.

View the exported PNG file. See how only what was in the page size exported? Nothing that is outside the page's borders will be seen.
Last edited by BobSongs on Thu Apr 25, 2013 1:31 am, edited 11 times in total.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Quick & Dirty: Exporting Images Tip

Postby brynn » Wed Jun 08, 2011 4:17 am

Nice Bob, very informative!

I just wanted to mention that wherever you have a screenshot of the toolbar, I only see a blank white square. I noticed this in another topic of yours too. I've tried to do a right-click, to get the image url from Properties, but I don't even get a context menu! I'm not sure what's causing this. If the image is an SVG, I would not see it, because I'm using IE currently (but not for long).

Usually my Renesis Player plug-in tries to display it. It's not always successful, but I would be getting the Renesis context menu with a right-click. It's weird that I can't even call up a context menu! Any ideas about this?

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Quick & Dirty: Exporting Images Tip

Postby BobSongs » Wed Jun 08, 2011 5:41 am

brynn wrote:...I just wanted to mention that wherever you have a screenshot of the toolbar, I only see a blank white square. I noticed this in another topic of yours too. I've tried to do a right-click, to get the image url from Properties, but I don't even get a context menu! I'm not sure what's causing this. If the image is an SVG, I would not see it, because I'm using IE currently (but not for long).

Usually my Renesis Player plug-in tries to display it. It's not always successful, but I would be getting the Renesis context menu with a right-click. It's weird that I can't even call up a context menu! Any ideas about this?

Do you have a lot of precautionary software in place? Lots of safety tools that prevent all kinds of things loading into your Internet Explorer browser? It's possible that, if this is the case, that it may be set to a very high level of caution.

The file is an SVG hosted from my website. I assure you it's perfectly harmless.

This is the source file's location: http://bobspcrepair.50webs.net/media/exportbitmap.svg. Feel free to right-click that link and save it to your desktop.

Have you tried other browsers? I recommend Mozilla's Firefox browser, but others would equally recommend Google's Chrome or the free Opera browser.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Quick & Dirty: Exporting Images Tip

Postby brynn » Wed Jun 08, 2011 5:52 am

Yes, after the changes in IE9, which make the browser nearly useless to me, I've decided to get a different kind. Still researching, but leaning towards either Firefox or Opera. Since I like open source, it will probably be Firefox, but Opera suits my needs as well and is also enticing.

It's because it's an SVG that I can't see it, not any security software. I wasn't worried about it being harmful though.

I don't really, really need to see it. i just thought I'd mention it, in case others might really, really want to see it. (You realize that no one using IE can see it, right?)(Well, maybe if they do have IE9, I'm not sure.)

Anyway, thanks :D

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Quick & Dirty: Exporting Images Tip

Postby BobSongs » Wed Jun 08, 2011 10:43 am

Your point is well taken. Here are my thoughts.

1. As far as using SVGs in a post, I'm following the forum's own option to add them for graphic purposes (which is a really sweet deal, in my humble opinion). To see my posts as they were meant to be displayed, I will add a note in each one recommending the use a browser that is compliant with the World Wide Web Consortium's standards.

It is known that

Internet Explorer ... is notorious for not following standards from the World Wide Web Consortium (W3C), an international community that develops standards to ensure the long-term growth of the Web.

--taken from Cross Browser Compatibility by Charlie Marval


(I admit I use Internet Explorer, when push comes to shove. But only for one task: it let's me select among a list of updates for Windows XP. Beyond that it never sees the light of day.)

2. Because I enjoy making tutorials, I made a request for the addition of five of the more commonly used toolbar icons (to be added under the "Smilies"). However, the answer came in the negative. I decided to provide them myself.

3. I admit I was sorely tempted to convert each SVG icon into a PNG. But I faced another issue: Internet Explorer and PNG transparency. While I haven't investigated fully, it seems IE is plagued with a "bug" making the correct display of PNGs difficult. So, we're back to using a W3C-compatible browser again. :roll:
Last edited by BobSongs on Fri Jun 10, 2011 1:07 am, edited 1 time in total.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Quick & Dirty: Exporting Images Tip

Postby brynn » Wed Jun 08, 2011 3:40 pm

But I faced another issue: Internet Explorer and PNG transparency. While I haven't investigated fully, it seems IE is plagued with a "bug" making the correct display of PNGs difficult.

I've never had a single problem displaying a PNG, with or without transparency, with IE. (been using it since Windows 95) I've never even heard of such a "bug". That doesn't mean that there isn't one, just that I've never heard of it. (which really shouldn't mean much at all, as I'm not very technically knowledgeable)

But I don't think you would run into any problems, displaying the toolbar screenshots in PNG.

User avatar
flamingolady
Posts: 687
Joined: Wed Jun 10, 2009 1:40 pm

Re: Quick & Dirty: Exporting Images Tip

Postby flamingolady » Thu Jun 09, 2011 4:00 pm

Brynne/Bob,
I use IE (v 8 still I think). When you say no one using IE can view the toolbar, I'm wondering what I'm missing seeing? Next to Bob's words 'From the Toolbar' neat the top of his first post, there's a tinee box with nothing in it, I assume that's what I'm missing?
dee

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Quick & Dirty: Exporting Images Tip

Postby BobSongs » Fri Jun 10, 2011 1:08 am

flamingolady wrote:Brynne/Bob,
I use IE (v 8 still I think). When you say no one using IE can view the toolbar, I'm wondering what I'm missing seeing? Next to Bob's words 'From the Toolbar' neat the top of his first post, there's a tinee box with nothing in it, I assume that's what I'm missing?
dee

Try reviewing the tutorial again. The SVGs have been replaced with PNG files. The toolbar icons should now appear in IE, but the transparent part of the icon may look odd.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Quick & Dirty: Exporting Images Tip

Postby brynn » Fri Jun 10, 2011 4:54 am

Yes, I see the toolbar icon now. It's displayed perfectly, no problem with transparency that I can see!
(Suddenly I seem to recall reading something about PNG transparency problem in IE, but I also seem to recall that it's been fixed. But I could be SO wrong, lol!)

dee, it used to be like a 1 to 1.5 inch squared empty white box (with no border). Now it's the size of the icon, which is pretty small, and box-like (with black border), but it's an icon (see the arrow?). Does that clear it up for you?


Return to “Tricks & Tutorials”