Add a Prepare for Bitmap Export screen (or equivalent)

[birdsaregood]

I am requesting some kind of screen, preview mode, or tool to prepare/preview graphics for exporting to bitmap.

Let's face it, 90% of the graphics we make in Inkscape are just going to wind up as a bitmap graphic for the web (or possible some program) with only a minority going into high-res prints or remaining as vectors (which won't really need this new tool).

The thing is, when I make a graphic for a web or any small icon, I don't have many pixels to work with and have to be careful about a number of things for which a special bitmap-export preparation window/prepare for web window, viewing mode, screen, or tool would greatly help, both regarding text and image graphics.

(It just so happens this is a very important tool keeping people using Adobe products and staying away from Inkscape. I'm sure anyone else who works on web graphics can relate and would love to see something like this for the 0.47 or 0.48 release. Don't get me wrong, I'm still able to prepare most of the elements for the web manually, but including these features would boost both the productivity and quality of creation of web (and other bitmapped) graphics.

Allow me to list some aspects that could be aided in this web/bitmap preparation feature. (BTW, all of the following is particularly important for smaller graphic elements where the amount of pixels in use is low.)

~General:

*Solid-pixel positions. In this bitmap-preparation window or tool, let selected elements lock to full-pixel positions (like X: 40px, Y: 20px as opposed to something like X: 40.2px, Y: 19.87px) so that they don't look fuzzy as Inkscape tries to anti-alias everything between two pixels when it's exported.

*Solid-pixel dimensions. Be able to have selected elements snap to full-pixel dimensions (such as 55x58pixels and not 54.8x58.3 pixels) so that the entire element will appear crisp (and it's going to wind up being pushed to this solid-pixel dimension as it's exported anyway).

*Solid-pixel outlines. Especially for small graphics and graphics with narrow outlines. Let us automatically snap selected elements with outlines to have outlines that are either 1, 2, 3, etc. pixels wide. Because having an outline of something like 1.3 pixels can result in having the line appear slightly blurred. (And even if someone starts a graphic out with such an outline, resizing could lead to accidental changes.)

*Blurred-boarders. Be able to see how far any applied blurring extends so that an exported graphic doesn't appear to have something like a cut-off shadow.

~Text-specific:

*For something like to-be HTML text, ensure that text locks to actual standard point sizes (and is not stretched).

*Have text be positioned within the actual typing letter size range (rather than what text happens to be typed). This is important for alignment. For example, if I type something with the letters "gyjp" and want to align it with something that only has the letters "ewasdfhklv", I will not be able to do so unless element boarders are universal for a given font.

*Have an option to prevent text from being anti-aliased upon, so it will appear like it does in many web browsers (useful for making a web-page mock-up among many other things).

*Some more advanced features which would be really nice to have (but may require more time to develop) would include more font formatting (like underline, slash-through, and superscript and subscript), automatic live spell-checking, and written CSS formatting code for particularly formatted text.

So the above features would *greatly* improve the usefulness of Inkscape as a web, icon, or other bitmap graphic creation tool. It would also be nice if in addition to these features, we get a special preview window for preparing bitmaps, like being able to see a preview of how the bitmap would look (such as in different formats, like PNG, JPEG with different amounts of compression, or the GIF with different palette or transparency settings), as well as being able to zoom in on them to be able to see the pixels large. I believe some Adobe programs like Fireworks similar web-preparation tools. Maybe some inspiration can be taken from their implementation, or maybe it can all be like a document or object mode that's set right when you start the new drawing. Or at very least have newly drawn elements start out at a particular grid point on the document and not a decimal point!

I assume that bitmap preparation information could even be saved in the Inkscape SVG, maybe even with different saved settings for web (with and its various formats) and print.

If someone accepts this task, I say THANK YOU, THANK YOU, THANK YOU, THANK YOU!!! ^_^ You are doing a great service to the Inkscape community.

[Guillermo Espertino (Gez) (gespertino-gmail)]

If you think it's worth, you should create a blueprint with this complete specification in the blueprints section, adding screenshots and more information about each feature. This is, imo, too detailed for a simple feature request and it's definitely not a bug.

I'd like to add some comments though:
I'm working in web design and I really can't find relevant differences between working for the web in inkscape or in illustrator (keep in mind that the right comparison would be between inkscape and illustrator, not between inkscape and fireworks).
Inkscape is a vector illustration program, like Adobe Illustrator, and you'll find some issues when you work with vectors with bitmap output in mind, like pixel precision (if you don't take care of working with integer pixel units).

If you work using pixels units and export at 90 dpi as PNG you'll get a nice bitmap output from Inkscape. You can open the png file in GIMP and use the save for web plugin. If you're not happy with the antialias you can use the sharpen filter (or the refocus plugin) to get sharper results before exporting.
You can use solid pixel positions and solid pixel dimensions. Just use the numeric inputs to specify the desired integer value and you'll get an accurate conversion when exporting (remember to export to 90 dpi, not 72 or other resolutions because if you do it, you'll have to rescale the exported bitmap and loose precision).
About the limit of the blurred shapes, it has been fixed in the development versions and will be in the next stable release (now the bounding box extends to the limits of the blur, avoiding unwanted clippings).

About the text part:
You already have tools to align to text baselines.
The other items you've requested are already filed in other bug reports/wishlist items.
Anyway, there is much place for improvements in the inkscape's text tools, I agree. A well developed blueprint would be a good starting point.

[birdsaregood (ariel36)]

I am pretty busy myself with school and stuff, but if you really think it will help I can try to come up with some mock-ups. (Any tips on creating and submitting a specification and blueprint?)

I know Inkscape is targeted at Illustrator and not Fireworks, but it just seems like Inkscape's most of the way there. Using GIMP can certainly help with most of this, but it still doesn't aid with using integer pixel values, and it still can't really undo anti-aliasing of text (which, when very small, is often only readable when not anti-aliased).

I am thinking of a web-development viewing mode, as opposed to vector or outline viewing mode, where zooming in will show large bitmap pixels and new tools will show up for doing these things like locking pixel values to integers (and maybe working with text too) and other stuff that would just help the web developer, including maybe pop-up bitmap preparation screens, so that when exported in a particular format it's already ready for the.

What do you think?

[birdsaregood (ariel36)]

Gez, I just saw this article that seems somewhat related to the rendering of text in Inkscape http://en.wikipedia.org/wiki/Font_hinting

I'm not sure how much of a tangent that is, but it seems like text shows up in Inkscape like the top line in their example image while in web browsers, word processors, etc, the lines show up with proper font hinting, as seen in the second line. Is this something that the Inkscape devs are working on, or maybe should I file some kind of bug?

[mahfiaz (mahfiaz)]

It seems like cairo has support for font rendering options.
http://home.gna.org/guile-cairo/docs/html/Font-Options.html

[Alexandre Prokoudine (alexandre-prokoudine)]

Hinting isn't currently supported by Inkscape. i don't know of anyone who is working on that. From what I was told, implementation of hinting support will require quite a lot of work.

[Guillermo Espertino (Gez) (gespertino-gmail)]

There are workarounds (using integer numbers and pixel as units for positioning and size of the elements, working with a 1px grid, etc:) that make me wonder if this should be marked as invalid.
It's already possible to work with pixel precision.
However, what you mention about text has some valid points.
I'll put this as a wishlist item, but maybe creating a meta-bug for text limitations would be better, and we should close this report since the rest of the requested operations are already possible.

Although, as I mentioned before, a detailed blueprint would be very interesting.