image size vs screen size/resolution

Post about projects that use Inkscape for web design.
User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

image size vs screen size/resolution

Postby brynn » Thu Jan 07, 2010 3:13 am

Hi Friends,
Some of you might notice that I just changed my signature here. (I got tired of posting the same links over and over.) But there's a limit to how many characters can be used in sig. So I got the idea in my head to create an image/graphic signature. But right away, before I start, I've run into a problem that really has been keeping me from making simple webpages, etc. for quite a long time. And I think now it's time to tackle this problem :P

I've learned the very basics of hrml (only the very, very basic version)(I guess I've been advised to learn CSS next, but haven't gotten around to it). Anyway, I know that any given image (or text) that takes up the full width of a page, will be displayed differently on screens with different resolutions and/or sizes. And I've never quite figured this out:

How to make an image or webpage that will exactly fit any screen resolution or size. And for the moment, I want to make a signature image that fits the width of the message, and again, for any screen res or size -- using Inkscape.

Can anyone give me either references to instructional material, or a brief explanation?

(Just now I'm wondering if most forum software maybe sets the width of messages to fit the largest resolution, with the realization that on smaller res, there will just be blank space filling the "excess"?)

I guess I just don't really know how creators of web content handle this issue, and hoping you can set me on the right path to learn. Thank you very much for your help :D

User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: image size vs screen size/resolution

Postby prkos » Thu Jan 07, 2010 4:32 am

I don't think you can stretch an image, well you can but you don't want to cause it's gonna be distorted. You probably want to put the image into an HTML element that has the same bg color as the image so they blend, and make it 100% wide so it fills entire area. But I don't think you can do it with signatures, maybe someone else comes up with something though...
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download

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

Re: image size vs screen size/resolution

Postby brynn » Tue Jan 12, 2010 10:16 pm

Thanks prkos.
So if you're making a webpage with Inkscape, then there's no such thing as the SVG webpage standing alone -- it always has to be set within an.html

User avatar
prkos
Posts: 1625
Joined: Tue Nov 06, 2007 8:45 am
Location: Croatia

Re: image size vs screen size/resolution

Postby prkos » Wed Jan 13, 2010 6:23 am

If you really want to play with svg read a lot here http://www.carto.net/svg/samples/ although I wouldn't until you grasp how "normal" web works (HTML and CSS).

SVG is XML, when you're creating SVG you're actually writing XML code (text), or better yet Inkscape does it for you. Inkscape is an XML editor, but any good text editor is an XML editor. What's great about Inkscape is it provides a graphical interface to display the file and manipulate the file by clicking around the screen instead of typing text. Kewl ey!

A long time ago (which means a couple of years ago in Internet terms) a lot of buzz was made around XHTML - this was an attempt to "upgrade" HTML so it can become XML, or a subset of XML. A lot of developers embraced the rules that XHTML brings, and a lot of websites now use XHTML as their DOCTYPE. But that's a bit wrong, because to get full potential of XML you have to serve the pages with the correct mime type, meaning use XML/application or something like that, instead of html/text. Websites are still served as html/text because IEs don't get XHTML.

IE is still the greatest obstacle to spreading and using SVG as websites. I'm not sure SVG is completely suitable to replace HTML, the correct way would probably be a combination of both, where SVG would mostly be used for graphical enhancements.

All this means that theoretically HTML is a subset of XML but in practice there is still no way to make complete pages with XML.

When you export to png you lose links, png is a raster image, it cannot be interactive. You can enclose the img in anchor tags (HTML) so the whole will be clickable in your sig.

Try searching for <canvas> element and how it's related to SVG, also <embed>, but no one using IE as their browser won't be able to see SVG without plugins for it.
just hand over the chocolate and nobody gets hurt

Inkscape Manual on Floss
Inkscape FAQ
very comprehensive Inkscape guide
Inkscape 0.48 Illustrator's Cookbook - 109 recipes to learn and explore Inkscape - with SVG examples to download

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

Re: image size vs screen size/resolution

Postby brynn » Wed Jan 13, 2010 9:10 am

Oh wow, thanks for that great info, prkos.
I will read, and try to understand and learn the info at the link you gave.
You can enclose the img in anchor tags (HTML) so the whole will be clickable in your sig.

Ok, I'm not sure.....just thinking.....well, what I've made in Inkscape is basically my current signature with some simple graphics. What I was thinking is that maybe I could get past the limitation of characters in the sig, by putting all the text in an image. So the problem with making the whole image a link, is that there are 4 different links, and I would hope to add a couple more later. I don't know if making 4 or more tiny images will really save me very many characters. I guess maybe it could save a few...

Well, I guess it sounds like I'm not going to be able to put an image containing links into my signature. But regarding IE being the obstacle to the transition to the more functional SVG, I think I saw a recent post in the News and whatever it's called forum, where MS has asked to join some SVG working group at W3C (or something about W3C). So maybe there's a light up ahead Image

Anyway, thanks again for your help :D

PS :idea: I don't suppose it would be possible to embed an SVG img into a PNG, GIF, or JPG -- nah, I guess once I saved it, the links would still be lost :(


Return to “Inkscape & the Web”