[Inkscape-user] Web design using Inkscape.

Discussion:

john Culleton

2013-04-10 19:49:39 UTC

I bought the book "Inkscape 0.48 Essentials for Web Designers."
Unfortunately the boook is light on worked examples. Does anyone
here care to post the url of a site using Inkscape, either for
main pages or for embedded svg images in an html page?
Incidentally Chapter 23 of Tavmong Bah's manual has more useful
infomration on this subject then the entire book that I bought,
referenced in the first sentence. Live and learn.

FYI my first baby steps toward such a site are at
http://webdesign.wexfordpress.net

--
John Culleton
Wexford Press
Free list of books for self-publishers:
http://wexfordpress.net/shortlist.html
PDF e-book: "Create Book Covers with Scribus"
available at http://www.booklocker.com/books/4055.html

Shlomi Fish

2013-04-11 02:37:57 UTC

Permalink

Hi John,

[Please reply to the list or all recipients.]

On Wed, 10 Apr 2013 15:49:39 -0400

Post by john Culleton
I bought the book "Inkscape 0.48 Essentials for Web Designers."
Unfortunately the boook is light on worked examples. Does anyone
here care to post the url of a site using Inkscape, either for
main pages or for embedded svg images in an html page?
Incidentally Chapter 23 of Tavmong Bah's manual has more useful
infomration on this subject then the entire book that I bought,
referenced in the first sentence. Live and learn.

I have quite a few images done using Inkscape here:

http://www.shlomifish.org/

The sources for the site are on http://www.shlomifish.org/meta/site-source/ .

Some pages with Inkscape images:

* http://www.shlomifish.org/art/

* http://www.shlomifish.org/MathVentures/bugs-in-square-mathml.xhtml

* http://www.shlomifish.org/humour/TheEnemy/

* http://www.shlomifish.org/humour/human-hacking/

Note that I usually convert these images to .pngs or .jpegs or whatever as
some browsers have a problem displaying SVGs and fonts can be a large problem.

Post by john Culleton
FYI my first baby steps toward such a site are at
http://webdesign.wexfordpress.net

Regards,

Shlomi Fish
--
-----------------------------------------------------------------
Shlomi Fish http://www.shlomifish.org/
My Public Domain Photos - http://www.flickr.com/photos/shlomif/

The bad thing about hardware is that it sometimes works and it sometimes
doesn’t. The good thing about software is that it’s consistent: it always
does not work, and it always does not work in exactly the same way.

Please reply to list if it's a mailing list post - http://shlom.in/reply .

a***@imnadze.ge

2013-04-11 14:50:13 UTC

Permalink

<html><body><div>Personally, I've made a home page of <a href="http://gvirabi.com">gvirabi.com</a> in Inkscape. I rendered it in PNG for reducing the size. I don't think it's a good idea to include the SVG file in HTML unless you have some interactive SVG content. </div><div> </div><div>Here is the Inkscape SVG image: </div><div><a href="http://gvirabi.com/images/logo.svg">http://gvirabi.com/images/logo.svg</a></div><div> </div><div>The corresponding rendered PNG image: </div><div><a href="http://gvirabi.com/images/logo.png" style="padding: 7px 8px; background-color: #F6FEFF; border-left: 1px solid #8FF1FF; margin: 10px 0px; display: inline-block; color: #3B5053; font-size: 13px; ">Loading Image...

</a></div><div> </div><div>And the site using this image as a background:</div><div><a href="http://gvirabi.com">http://gvirabi.com</a>/</div><div> </div><div>Cheers! </div><div></div>
<blockquote id="replyBlockquote" webmail="1" style="border-left: 2px solid blue; margin-left: 8px; padding-left: 8px; font-size:10pt; color:black; font-family:verdana;" mce_style="border-left: 2px solid blue; margin-left: 8px; padding-left: 8px; font-size:10pt; color:black; font-family:verdana;">
<div id="wmQuoteWrapper">
-------- Original Message -------- 
Subject: Inkscape-user Digest, Vol 83, Issue 4 
From: <a href="mailto:inkscape-user-***@lists.sourceforge.net">inkscape-user-***@lists.sourceforge.net</a> 
Date: Thu, April 11, 2013 4:37 am 
To: <a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a> 
 
Send Inkscape-user mailing list submissions to 
<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a> 
 
To subscribe or unsubscribe via the World Wide Web, visit 
<a href="https://lists.sourceforge.net/lists/listinfo/inkscape-user" mce_href="https://lists.sourceforge.net/lists/listinfo/inkscape-user">https://lists.sourceforge.net/lists/listinfo/inkscape-user</a> 
or, via email, send a message with subject or body 'help' to 
<a href="mailto:inkscape-user-***@lists.sourceforge.net">inkscape-user-***@lists.sourceforge.net</a> 
 
You can reach the person managing the list at 
<a href="mailto:inkscape-user-***@lists.sourceforge.net">inkscape-user-***@lists.sourceforge.net</a> 
 
When replying, please edit your Subject line so it is more specific 
than "Re: Contents of Inkscape-user digest..." 
 
 
Today's Topics: 
 
1. Re: Using Braille labels in inkscape (Pranav Lal) 
2. Web design using Inkscape. (john Culleton) 
3. Re: Web design using Inkscape. (Shlomi Fish) 
4. Re: Using Braille labels in inkscape (Chris Tooley) 
5. About formatting text (Javier Garcia) 
 
 
---------------------------------------------------------------------- 
 
Message: 1 
Date: Wed, 10 Apr 2013 05:35:06 +0530 
From: "Pranav Lal" <<a href="mailto:***@gmail.com">***@gmail.com</a>> 
Subject: Re: [Inkscape-user] Using Braille labels in inkscape 
To: "'Inkscape User Community'" <<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a>> 
Message-ID: <013601ce357f$1c3b9a70$54b2cf50$@<a href="http://gmail.com" mce_href="http://gmail.com">gmail.com</a>> 
Content-Type: text/plain; charset="UTF-8" 
 
Hi Chris, 
 
I want to create Braille labels in Inkscape and label tactile diagrams in Braille. How should I do this assuming I have a Braille font? 
 
Pranav 
 
-----Original Message----- 
From: Chris Tooley [<a href="mailto:***@gmail.com">mailto:***@gmail.com</a>] 
Sent: Tuesday, April 09, 2013 11:36 PM 
To: Inkscape User Community 
Subject: Re: [Inkscape-user] Using Braille labels in inkscape 
 
I think you have an extra braille font installed. If that's the case, you can send it to other people to install (might be scary thing for them) or, you can simply convert the text objects to a path (Path>Object to Path), which renders the font to an svg path for you - I do this whenever I have bizarre fonts and I need to make the svg portable. Please note that once you convert to path, you'll not be able to edit the text with the text tool. 
 
 
 
 
------------------------------ 
 
Message: 2 
Date: Wed, 10 Apr 2013 15:49:39 -0400 
From: john Culleton <<a href="mailto:***@wexfordpress.com">***@wexfordpress.com</a>> 
Subject: [Inkscape-user] Web design using Inkscape. 
To: Inkscape User Community <<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a>> 
Message-ID: <<a href="mailto:***@localb.wexfordpress.net">***@localb.wexfordpress.net</a>> 
Content-Type: text/plain; charset=US-ASCII 
 
I bought the book "Inkscape 0.48 Essentials for Web Designers." 
Unfortunately the boook is light on worked examples. Does anyone 
here care to post the url of a site using Inkscape, either for 
main pages or for embedded svg images in an html page? 
Incidentally Chapter 23 of Tavmong Bah's manual has more useful 
infomration on this subject then the entire book that I bought, 
referenced in the first sentence. Live and learn. 
 
FYI my first baby steps toward such a site are at 
<a href="http://webdesign.wexfordpress.net" mce_href="http://webdesign.wexfordpress.net">http://webdesign.wexfordpress.net</a> 
 
-- 
John Culleton 
Wexford Press 
Free list of books for self-publishers: 
<a href="http://wexfordpress.net/shortlist.html">http://wexfordpress.net/shortlist.html</a> 
PDF e-book: "Create Book Covers with Scribus" 
available at <a href="http://www.booklocker.com/books/4055.html">http://www.booklocker.com/books/4055.html</a> 
 
 
 
------------------------------ 
 
Message: 3 
Date: Thu, 11 Apr 2013 05:37:57 +0300 
From: Shlomi Fish <<a href="mailto:***@shlomifish.org">***@shlomifish.org</a>> 
Subject: Re: [Inkscape-user] Web design using Inkscape. 
To: Inkscape User Community <<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a>> 
Message-ID: <<a href="mailto:***@telaviv1.shlomifish.org">***@telaviv1.shlomifish.org</a>> 
Content-Type: text/plain; charset=UTF-8 
 
Hi John, 
 
[Please reply to the list or all recipients.] 
 
On Wed, 10 Apr 2013 15:49:39 -0400 
john Culleton <<a href="mailto:***@wexfordpress.com">***@wexfordpress.com</a>> wrote: 
 
> I bought the book "Inkscape 0.48 Essentials for Web Designers." 
> Unfortunately the boook is light on worked examples. Does anyone 
> here care to post the url of a site using Inkscape, either for 
> main pages or for embedded svg images in an html page? 
> Incidentally Chapter 23 of Tavmong Bah's manual has more useful 
> infomration on this subject then the entire book that I bought, 
> referenced in the first sentence. Live and learn. 
> 
 
I have quite a few images done using Inkscape here: 
 
<a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a> 
 
The sources for the site are on <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>meta/site-source/ . 
 
Some pages with Inkscape images: 
 
* <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>art/ 
 
* <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>MathVentures/bugs-in-square-mathml.xhtml 
 
* <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>humour/TheEnemy/ 
 
* <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>humour/human-hacking/ 
 
Note that I usually convert these images to .pngs or .jpegs or whatever as 
some browsers have a problem displaying SVGs and fonts can be a large problem. 
 
> FYI my first baby steps toward such a site are at 
> <a href="http://webdesign.wexfordpress.net" mce_href="http://webdesign.wexfordpress.net">http://webdesign.wexfordpress.net</a> 
> 
 
Regards, 
 
Shlomi Fish 
 
-- 
----------------------------------------------------------------- 
Shlomi Fish <a href="http://www.shlomifish.org/" mce_href="http://www.shlomifish.org/">http://www.shlomifish.org/</a> 
My Public Domain Photos - <a href="http://www.flickr.com/photos/shlomif">http://www.flickr.com/photos/shlomif</a>/ 
 
The bad thing about hardware is that it sometimes works and it sometimes 
doesn?t. The good thing about software is that it?s consistent: it always 
does not work, and it always does not work in exactly the same way. 
 
Please reply to list if it's a mailing list post - <a href="http://shlom.in/reply">http://shlom.in/reply</a> . 
 
 
 
------------------------------ 
 
Message: 4 
Date: Wed, 10 Apr 2013 21:26:43 -0700 
From: Chris Tooley <<a href="mailto:***@gmail.com">***@gmail.com</a>> 
Subject: Re: [Inkscape-user] Using Braille labels in inkscape 
To: Inkscape User Community <<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a>> 
Message-ID: 
<<a href="mailto:CAC_8CRpBGxnmX+ZoEuv7k-bT3-Jf_40RFg3DkK=***@mail.gmail.com">CAC_8CRpBGxnmX+ZoEuv7k-bT3-Jf_40RFg3DkK=***@mail.gmail.com</a>> 
Content-Type: text/plain; charset="utf-8" 
 
Hi Pranav, 
 
I may have a severely deficient understanding of how Braille works on 
computers, one of the other suggestions might yield better results :) 
 
-Chris 
 
On Tuesday, April 9, 2013, Pranav Lal wrote: 
 
> Hi Chris, 
> 
> I want to create Braille labels in Inkscape and label tactile diagrams in 
> Braille. How should I do this assuming I have a Braille font? 
> 
> Pranav 
> 
> -----Original Message----- 
> From: Chris Tooley [<a href="mailto:***@gmail.com">mailto:***@gmail.com</a> <javascript:;>] 
> Sent: Tuesday, April 09, 2013 11:36 PM 
> To: Inkscape User Community 
> Subject: Re: [Inkscape-user] Using Braille labels in inkscape 
> 
> I think you have an extra braille font installed. If that's the case, you 
> can send it to other people to install (might be scary thing for them) or, 
> you can simply convert the text objects to a path (Path>Object to Path), 
> which renders the font to an svg path for you - I do this whenever I have 
> bizarre fonts and I need to make the svg portable. Please note that once 
> you convert to path, you'll not be able to edit the text with the text tool. 
> 
> 
> 
> ------------------------------------------------------------------------------ 
> Precog is a next-generation analytics platform capable of advanced 
> analytics on semi-structured data. The platform includes APIs for building 
> apps and a phenomenal toolset for data science. Developers can use 
> our toolset for easy data analysis & visualization. Get a free account! 
> <a href="http://www2.precog.com/precogplatform/slashdotnewsletter" mce_href="http://www2.precog.com/precogplatform/slashdotnewsletter">http://www2.precog.com/precogplatform/slashdotnewsletter</a> 
> _______________________________________________ 
> Inkscape-user mailing list 
> <a href="mailto:Inkscape-***@lists.sourceforge.net">Inkscape-***@lists.sourceforge.net</a> <javascript:;> 
> <a href="https://lists.sourceforge.net/lists/listinfo/inkscape-user" mce_href="https://lists.sourceforge.net/lists/listinfo/inkscape-user">https://lists.sourceforge.net/lists/listinfo/inkscape-user</a> 
> 
-------------- next part -------------- 
An HTML attachment was scrubbed... 
 
------------------------------ 
 
Message: 5 
Date: Thu, 11 Apr 2013 13:37:07 +0200 
From: Javier Garcia <<a href="mailto:***@gmail.com">***@gmail.com</a>> 
Subject: [Inkscape-user] About formatting text 
To: Inkscape User Community <<a href="mailto:inkscape-***@lists.sourceforge.net">inkscape-***@lists.sourceforge.net</a>> 
Message-ID: <<a href="mailto:***@gmail.com">***@gmail.com</a>> 
Content-Type: text/plain; charset="iso-8859-1" 
 
Hi, 
 
I have selected a piece of text (Canalones Bastimar) to choose another 
font but the lines become like this: 
 
 
 
Is the same for you? The types are Futura Light and Futura Normal. 
 
Any idea? 
 
0.48 
 
Javi 
-------------- next part -------------- 
An HTML attachment was scrubbed... 
-------------- next part -------------- 
A non-text attachment was scrubbed... 
Name: gfhjhacc.png 
Type: image/png 
Size: 26268 bytes 
Desc: not available 
 
------------------------------ 
 
------------------------------------------------------------------------------ 
Precog is a next-generation analytics platform capable of advanced 
analytics on semi-structured data. The platform includes APIs for building 
apps and a phenomenal toolset for data science. Developers can use 
our toolset for easy data analysis & visualization. Get a free account! 
<a href="http://www2.precog.com/precogplatform/slashdotnewsletter" mce_href="http://www2.precog.com/precogplatform/slashdotnewsletter">http://www2.precog.com/precogplatform/slashdotnewsletter</a> 
 
------------------------------ 
 
_______________________________________________ 
Inkscape-user mailing list 
<a href="mailto:Inkscape-***@lists.sourceforge.net">Inkscape-***@lists.sourceforge.net</a> 
<a href="https://lists.sourceforge.net/lists/listinfo/inkscape-user" mce_href="https://lists.sourceforge.net/lists/listinfo/inkscape-user">https://lists.sourceforge.net/lists/listinfo/inkscape-user</a> 
 
 
End of Inkscape-user Digest, Vol 83, Issue 4 
******************************************** 

</div>
</blockquote></body></html>

John Fisher

2013-04-11 17:29:16 UTC

Permalink

I build a webapp ( runs on our product, not on the 'net) that uses a very large Inkscape SVG in a dynamic AJAX setup
that makes images of LEDs blink and animates boards moving in and out of a chassis.

I'm no SVG expert but I have got some things working. Can I help?

Post by Shlomi Fish
------------------------------
Message: 2
Date: Wed, 10 Apr 2013 15:49:39 -0400
Does anyone
here care to post the url of a site using Inkscape, either for
main pages or for embedded svg images in an html page?
--
John Fisher
Znyx Networks

john Culleton

2013-04-11 19:05:07 UTC

Permalink

On Thu, 11 Apr 2013 10:29:16 -0700

Post by John Fisher
I build a webapp ( runs on our product, not on the 'net) that uses a
very large Inkscape SVG in a dynamic AJAX setup that makes images of
LEDs blink and animates boards moving in and out of a chassis.
I'm no SVG expert but I have got some things working. Can I help?

------------------------------------------------------------------------------
Precog is a next-generation analytics platform capable of advanced
analytics on semi-structured data. The platform includes APIs for
building apps and a phenomenal toolset for data science. Developers
can use our toolset for easy data analysis & visualization. Get a
free account! http://www2.precog.com/precogplatform/slashdotnewsletter
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

Can you share the svg file? Your copyright respected of course.

John Fisher

2013-04-11 21:32:43 UTC

Permalink

No, else I'd just put it up for viewing.
heres is a screenshot:
Loading Image...

The important thing is that very complex SVG drawing can be rendered fast enough, and you can then animate the parts.
Also it scales beautifully.

In my drawing there is a typical computer blade server chassis with six slots. Each slot has three optional drawings of
differing boards, and a blank plate. Plus the power supplies and fan trays, plus two Ethernet switches. Each element
(board, fan, switch, power supply) has a status and the app can change the look to match the status. There are something
like 100 LEDs to manage

Gotcha:
doesn't work in IE at all, use recent Chrome or FF to view SVGs.

Post by john Culleton
Can you share the svg file? Your copyright respected of course.
--
John Fisher
Znyx Networks

Nicu Buculei

2013-04-15 17:59:09 UTC

Permalink

Personally, I've made a home page of gvirabi.com in Inkscape. I rendered

it in PNG

for reducing the size. I don't think it's a good idea to include the SVG

file in

HTML unless you have some interactive SVG content.

But, aside some possible Internet Explorer compatibility problems, *why*
do you think is a good idea?

Regarding the file size optimization, I see your SVG is 19 KB while the
PNG us 433 KB, using SVG would make for a way smaller total page size.

--
nicu :: http://photoblog.nicubunu.ro/

Chris Tooley

2013-04-15 23:04:40 UTC

Permalink

Post by a***@imnadze.ge

Personally, I've made a home page of gvirabi.com in Inkscape. I rendered

it in PNG

for reducing the size. I don't think it's a good idea to include the SVG

file in

HTML unless you have some interactive SVG content.

But, aside some possible Internet Explorer compatibility problems, *why*
do you think is a good idea?
Regarding the file size optimization, I see your SVG is 19 KB while the
PNG us 433 KB, using SVG would make for a way smaller total page size.
--
nicu :: http://photoblog.nicubunu.ro/

With IE9, microsoft has implemented a basic SVG set:
http://msdn.microsoft.com/en-ca/ie/hh410107.aspx

I suspect it was rendered to PNG not for size constraints but computing
constraints, looking at gvirabi, there's a fairly large circular gradient,
with some machines that may cause a problem.

I could be wrong though.

-Chris

a***@imnadze.ge

2013-04-17 14:47:41 UTC

Permalink

<html><body><div>> But, aside some possible Internet Explorer compatibility problems, *why* 
> do you think is a good idea? 
></div><div>> Regarding the file size optimization, I see your SVG is 19 KB while the 
> PNG us 433 KB, using SVG would make for a way smaller total page size.</div><div> </div><div>Gvirabi's background is a big bulk image and definitely not a good example. Perhaps, this might be a good example for size reduction. It's an icon set and there are too many small objects:</div><div><a href="http://gvirila.com/launch/images/sprite.svg">http://gvirila.com/launch/images/sprite.svg</a> </div><div><a href="http://gvirila.com/launch/images/sprite.png" style="padding: 7px 8px; background-color: #F6FEFF; border-left: 1px solid #8FF1FF; margin: 10px 0px; display: inline-block; color: #3B5053; font-size: 13px; ">Loading Image...

</a></div></body></html>

Tavmjong Bah

2013-04-17 17:07:47 UTC

Permalink

Post by a***@imnadze.ge

Post by Nicu Buculei
But, aside some possible Internet Explorer compatibility problems,

*why*

Post by Nicu Buculei
do you think is a good idea?
Regarding the file size optimization, I see your SVG is 19 KB while

the

Post by Nicu Buculei
PNG us 433 KB, using SVG would make for a way smaller total page

size.
Gvirabi's background is a big bulk image and definitely not a good
example. Perhaps, this might be a good example for size reduction.
http://gvirila.com/launch/images/sprite.svg
Loading Image...

On the web you should be serving compressed SVG files. The compressed
sprite.svg is 18288 bytes, smaller than sprite.png which is 18833 bytes.
If you clean up the SVG (remove the 36 unused definitions and save with
the option available in 0.49 to remove unused/redundant/incorrect
attributes) it compresses to 14492 bytes. SVG (and XML in general)
compresses really well.

Tav

John Fisher

2013-04-17 17:55:04 UTC

Permalink

Tav, thats interesting. Anything special to know about how to do the compression?

I have a similar problem, a very large SVG with a zillion gradiants and other unused cruft and the vacuum command
doesn't clean them up.

Post by Tavmjong Bah
On the web you should be serving compressed SVG files. The compressed
sprite.svg is 18288 bytes, smaller than sprite.png which is 18833 bytes.
If you clean up the SVG (remove the 36 unused definitions and save with
the option available in 0.49 to remove unused/redundant/incorrect
attributes) it compresses to 14492 bytes. SVG (and XML in general)
compresses really well.
Tav
--
John Fisher
Znyx Networks

Mark Crutch

2013-04-18 10:41:44 UTC

Permalink

Unless storage space is an issue, or you have a very slow server, I would
suggest having uncompressed SVG files, but enabling GZip compression on the
web server software itself (Apache, IIS, etc). That gives you the size
advantage of SVGZ but will also reduce the size of other files that you
serve.

(I'm a hypocrite in this regard, as I serve SVGZ files, but that's because
we've got over 200 comics available for download and the extra storage
space costs money).

Mark

--
Co-creator of *The Greys* and *Monsters, Inked* webcomics, created with
Inkscape

Website http://www.peppertop.com/
Facebook http://facebook.com/TheGreysComic
Twitter https://twitter.com/TheGreysComic

Continue reading on narkive:

Search results for '[Inkscape-user] Web design using Inkscape.' (Questions and Answers)

replies

Which is the best graphics / publishing / design programme for a beginner?

started 2013-07-26 08:44:34 UTC

programming & design

replies

What is the best way to learn web design/ blog design?

started 2009-08-15 05:13:26 UTC

programming & design

replies

Confused with what adobe product to use for web design and web graphics.. can you help?