svg or xpm?

Themes, icons, wallpapers, etc.
Post Reply
Message
Author
Benctes
Posts: 7
Joined: Thu 07 Jun 2018, 15:10
Location: 828 Pike Street San Diego, CA 92111
Contact:

svg or xpm?

#1 Post by Benctes »

what is the lightest and best?

User avatar
souleau
Posts: 148
Joined: Sun 23 Oct 2016, 15:24

#2 Post by souleau »

The short answer is SVG.

SVG (Scalable Vector Graphics) is, as the name implies, a vector oriented graphic format. XPM (X Pixmap), by contrast, is a pixel oriented graphic format.
The difference between these two, is that with a pixel oriented graphic format, each pixel (dot) in your picture needs to be defined by both color value and position. A vector oriented graphic format only stores the coordinates of each node in the picture (start and/or endpoint of a line), the mathematical properties of the lines between them, line thickness and color values for lines and the insides of objects.
This means, provided someone knows what they are doing, that in most cases an SVG is considerably smaller in size, and quicker to load, because your computer is basically a giant calculator, and so it likes things that are defined mathematically.
And therein lies the practical distinction also. A vector oriented graphic format is preferable for pictures which can easily be broken down in mathematically defined figures or components, like icons, for instance, whereas a pixel oriented graphic format is preferable for photographs and pictures of a more chaotic or random nature.

Hope this helps!

disciple
Posts: 6984
Joined: Sun 21 May 2006, 01:46
Location: Auckland, New Zealand

#3 Post by disciple »

Are you sure about all that?
I have a feeling performance is better with xpm. And it is probably still less likely to need special libraries for support.

But I think it would be rare to choose between them based on performance.
SVG allows you to scale an image to large sizes without deterioration. A raster format like xpm gives you crisp pixel optimised icons. Those are good reasons to choose between them.
Do you know a good gtkdialog program? Please post a link here

Classic Puppy quotes

ROOT FOREVER
GTK2 FOREVER

User avatar
souleau
Posts: 148
Joined: Sun 23 Oct 2016, 15:24

#4 Post by souleau »

I am fairly confident in my claim yes.

Let's take a very small and simple example, a 48px by 48px picture of a white circle with a dark outline against a transparant backround.

This is the svg code for the picture:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m46 24c0 12.15-9.85 22-22 22-12.15 0-22-9.85-22-22 0-12.15 9.85-22 22-22 12.15 0 22 9.85 22 22z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg>
And this is the xpm code for the same picture:

Code: Select all

/* XPM */
static char * roundbase01_xpm[] = {
"48 48 76 1",
" 	c None",
".	c #434343",
"+	c #444444",
"@	c #494949",
"#	c #6B6B6B",
"$	c #878787",
"%	c #909090",
"&	c #9B9B9B",
"*	c #6A6A6A",
"=	c #484848",
"-	c #595959",
";	c #9A9A9A",
">	c #CECECE",
",	c #F8F8F8",
"'	c #FFFFFF",
")	c #CDCDCD",
"!	c #999999",
"~	c #585858",
"{	c #454545",
"]	c #5F5F5F",
"^	c #B8B8B8",
"/	c #FCFCFC",
"(	c #B6B6B6",
"_	c #5E5E5E",
":	c #515151",
"<	c #FEFEFE",
"[	c #B4B4B4",
"}	c #505050",
"|	c #707070",
"1	c #EAEAEA",
"2	c #E9E9E9",
"3	c #6E6E6E",
"4	c #929292",
"5	c #FBFBFB",
"6	c #919191",
"7	c #9D9D9D",
"8	c #8D8D8D",
"9	c #737373",
"0	c #FDFDFD",
"a	c #EDEDED",
"b	c #EBEBEB",
"c	c #4E4E4E",
"d	c #B1B1B1",
"e	c #AEAEAE",
"f	c #636363",
"g	c #616161",
"h	c #BCBCBC",
"i	c #B9B9B9",
"j	c #545454",
"k	c #525252",
"l	c #969696",
"m	c #CFCFCF",
"n	c #CCCCCC",
"o	c #F7F7F7",
"p	c #686868",
"q	c #666666",
"r	c #838383",
"s	c #818181",
"t	c #949494",
"u	c #9C9C9C",
"v	c #939393",
"w	c #828282",
"x	c #656565",
"y	c #C9C9C9",
"z	c #E7E7E7",
"A	c #6D6D6D",
"B	c #8C8C8C",
"C	c #8B8B8B",
"D	c #8A8A8A",
"E	c #AFAFAF",
"F	c #ADADAD",
"G	c #4F4F4F",
"H	c #F9F9F9",
"I	c #8E8E8E",
"J	c #7B7B7B",
"K	c #7A7A7A",
"                                                ",
"                 .+++++++++++++                 ",
"              +++++++++++++++++++               ",
"             ++++++@#$%&&%$*=++++++             ",
"           +++++-;>,'''''''',)!~++++{           ",
"          ++++]^/''''''''''''''/(_++++          ",
"        ++++:(<''''''''''''''''''<[}++++        ",
"       ++++|1''''''''''''''''''''''23++++       ",
"      ++++4/''''''''''''''''''''''''56+++.      ",
"      +++7''''''''''''''''''''''''''''&+++      ",
"     +++%''''''''''''''''''''''''''''''8+++     ",
"    +++90''''''''''''''''''''''''''''''/|+++    ",
"   .++}a''''''''''''''''''''''''''''''''bc++    ",
"   +++d''''''''''''''''''''''''''''''''''e+++   ",
"  +++f0''''''''''''''''''''''''''''''''''/g++   ",
"  +++h''''''''''''''''''''''''''''''''''''i+++  ",
"  ++j5''''''''''''''''''''''''''''''''''''5k++  ",
" .++l''''''''''''''''''''''''''''''''''''''4+++ ",
" +++m''''''''''''''''''''''''''''''''''''''n+++ ",
" ++@,''''''''''''''''''''''''''''''''''''''o=++ ",
" ++p''''''''''''''''''''''''''''''''''''''''q++ ",
" ++r''''''''''''''''''''''''''''''''''''''''s++ ",
" ++t''''''''''''''''''''''''''''''''''''''''4++ ",
" ++7''''''''''''''''''''''''''''''''''''''''u++ ",
" ++7''''''''''''''''''''''''''''''''''''''''u++ ",
" ++v''''''''''''''''''''''''''''''''''''''''4++ ",
" ++w''''''''''''''''''''''''''''''''''''''''s++ ",
" ++x''''''''''''''''''''''''''''''''''''''''f++ ",
" ++@,''''''''''''''''''''''''''''''''''''''o=++ ",
" +++n''''''''''''''''''''''''''''''''''''''y++. ",
" +++l''''''''''''''''''''''''''''''''''''''4+++ ",
"  ++j5''''''''''''''''''''''''''''''''''''5k++  ",
"  {++h''''''''''''''''''''''''''''''''''''i+++  ",
"   ++f0''''''''''''''''''''''''''''''''''/g++   ",
"   +++d''''''''''''''''''''''''''''''''''e+++   ",
"    ++}2''''''''''''''''''''''''''''''''zc++    ",
"    +++|/''''''''''''''''''''''''''''''5A+++    ",
"     +++%'''''''''''''''''''''''''''''<B+++     ",
"      +++&<''''''''''''''''''''''''''<;+++      ",
"      ++++C/''''''''''''''''''''''''5D+++.      ",
"       .+++|1''''''''''''''''''''''23++++       ",
"        ++++}E/''''''''''''''''''/FG+++.        ",
"          ++++]^H''''''''''''''H(_++++          ",
"           +++++}I>,'''''''',n8}++++{           ",
"             ++++++=_J%&&%K_=++++++             ",
"              +++++++++++++++++++               ",
"                 {++++++++++++.                 ",
"                                                "};
I am sure you can understand that the difference in file size will grow exponentially larger the bigger the picture becomes. And as you pointed out, I could use the same little svg file to depict a perfectly round circle that would fill your entire screen. So svg as a format is a lot more flexible, in a lot of different ways.
SVG code has xml as its base, so your Internet browser knows how to handle it as well. Though, truth be told, some have used this fact to put malicious code into svg images.
The library needed is librsvg, I do believe most Puppies come standard with that.

Post Reply