Inkscape Tutorial in Full Circle Magazine

Share your Inkscape tricks and tutorials here.
User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Tue May 08, 2018 10:09 pm

The collection of Inkscape Special Editions - copies of my articles extracted from the original magazines and grouped together - has now expanded to 10 files, bringing them all the way up to part 72 of the series.

The whole set can be downloaded, free of charge, from here: https://fullcirclemagazine.org/inkscape ... -editions/
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Tue May 08, 2018 11:36 pm

Very cool! Thanks, Xav!
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Mon May 28, 2018 6:24 pm

Full Circle Magazine #133 is out, with part 73 of my series. This one starts a series about using SVG in a web page with a general introduction to the options, then specifics on the first couple: exporting as PNG, and linking directly to an SVG file.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Tue May 29, 2018 9:08 am

If you're going to explore Content Security Policy with Inkscape SVGs, I can... well, not help, but tell a story of unhelpful standards.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Tue May 29, 2018 8:51 pm

I probably won't be going into that side of things. It's still an Inkscape series, so I will be focusing more on using the capabilities already present in Inkscape to add some interactivity, and probably sidetracking a bit into the realms of CSS animation, but all in the context of a fairly self-contained and self-hosted web page, such that CSP and CORS don't really feature.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Wed May 30, 2018 12:20 am

Thought so - just had to think of it, as it was a very recent fight with the web I had :)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sun Jul 01, 2018 12:01 am

Full Circle Magazine #134 is out, containing part 74 of my series. This time I continue looking at how to use SVG in a web page, this time in <object> tags or as inline code. There's also an introduction to XML namespaces with an eye to reducing the file size of exported SVG images.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Thu Aug 02, 2018 11:45 pm

Full Circle Magazine #135 is out, containing part 75 of my series. This time I continue looking at how to use SVG in a web page, covering basic CSS animations.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Fri Aug 03, 2018 2:20 am

Cool :) Thank you, Xav, for keeping this series up. It's a really important source of information.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Fri Oct 19, 2018 8:03 pm

Whoops! I forgot to post about the last couple of issues:

Full Circle Magazine #136 contains part 76 of my series. This is the first of two parts looking at how to animate SVG in a browser using SMIL.

Full Circle Magazine #137 contains part 77 of my series. This is the second of two parts looking at how to animate SVG in a browser using SMIL.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Sat Oct 20, 2018 2:34 am

I never get around to reading them... :-( I should definitely reserve some time for these, though. Thank you, Xav!
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sat Oct 20, 2018 3:11 am

I doubt there's much, if anything, that you could learn from them. You may as well just wait for the film version ;)
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Sun Oct 21, 2018 12:41 am

That with the film version is a joke, right? Or are you planning on turning these into videos?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Mon Oct 22, 2018 1:16 am

It's half a joke.

I've been posting the old Heathenx videos over on Youtube, so that they don't get lost entirely. But some of them are a bit outdated - particularly those that use the legacy gradient editor. I've been thinking about recording some screencasts myself - not tutorials (I'm not a very good artist) but more likely walkthroughs of particular functionality. Basically video versions of some of my tutorials.

As with all things, though, it's a question of when (or if) I can find enough free time to do it.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Mon Oct 22, 2018 6:34 am

I'd like that. I know you'd produce great quality content-wise, and I'm sure it would be useful for a lot of people.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sat Dec 01, 2018 3:25 am

Full Circle Magazine #138 contains part 78 of my tutorial series. This one describes how to create a self-drawing path with CSS. See this thread for a bit more about the technique, and a link to Moini's extension that will do the hard work for you.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Sat Dec 01, 2018 8:22 am

Oh, and it's not even finished :-( .... Does it work well enough?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Mon Dec 03, 2018 12:41 am

It worked well enough when I tried it. The focus of the article is on doing the job by hand, so the reference to the thread and extension are more a case of "here's another option" than "here's what you should be using".

No sooner had I posted about Issue 138, than issue #139 has been released. This time my article is about using viewBox and named views to reveal only part of an image, based on the fragment identifier in the URL.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sun Dec 30, 2018 1:52 am

After showing how to display only part of an image, based on the fragment identifier in the URL, Full Circle Magazine #140 includes Part 80 of the series, which demonstrates a technique to show only one group or layer from an image by using the CSS ":target" selector (and a named fragment identifier in the URL).

The two techniques can be used for similar end results but the best way to think of it is this: the first method (in issue #139) lets you lay out multiple images in the x-y plane and show only one; the second method (in issue #140) lets you stack multiple images in the z-direction and show only one.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Wed Jan 02, 2019 2:32 am

The description reminds me of sozi: http://sozi.baierouge.fr/
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sat Jan 05, 2019 1:50 am

Moini wrote:The description reminds me of sozi: http://sozi.baierouge.fr/


JessyInk is the Inkscape equivalent to Sozi (which, in turn, is an Open Source version of Prezi).

The tricks in the last couple of instalments have been about ways to show a subsection of your SVG image (either carved up by x-y location, or by layer/group -but, unfortunately, not by both) by adding a fragment identifier to the URL. Switching the fragment identifier doesn't animate the transition from one view to another, so it can't do Sozi-like effects.

Essentially these techniques are a vector version of "image sprites", whereby you send all the icons and images you need for your site as a single large image, then carve them up with CSS. Although the image is larger, that's made up for by the reduction in requests going over the network, so it can speed up websites that are served using HTTP/1.1 (the more recent HTTP/2 uses a different approach which means that keeping the images separate is usually the better option).
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Sat Jan 05, 2019 9:54 am

Yes, I've already used SVG sprites (for icons at inkscape.org, those with two states). Didn't know that HTTP/2 is working differently in that respect - thanks for the extra info :D
(also never used #id - will it clip to the selected object's bounding box?)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

User avatar
Xav
Posts: 1193
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Inkscape Tutorial in Full Circle Magazine

Postby Xav » Sun Jan 06, 2019 12:23 am

Moini wrote:Didn't know that HTTP/2 is working differently in that respect - thanks for the extra info :D


Yes, HTTP/2 opens a single persistent connection then multiplexes the requests over it. Since the main reason for image sprites is to avoid the overhead of opening a connection per image, there's no longer a need for them with HTTP/2. In fact it's recommended to keep all your assets separate, so the browser can cache them more effectively, and you won't need to get all the images again if there's a change to one of them.

Moini wrote:(also never used #id - will it clip to the selected object's bounding box?)


Just appending an id to an image URL may pan the image to ensure the object is in view (depending on the browser), but certainly won't scale or clip it. But you can create named views (essentially a set of viewBox coordinates with an id), and when that ID is referenced in the URL the browser will display the image based on the corresponding viewBox - i.e. it will zoom, pan, and hide anything outside the defined area. You can also put a viewBox directly in the fragment identifier if you don't want to set up named views in the SVG itself. Both these approaches are described in part #79.

Part #80 describes a technique for using a fragment identifier together with some CSS to show only a specific group. So although you are putting the ID in the fragment identifier, the fact that everything else gets hidden is to do with the CSS, not an inherent capability of SVG.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Sun Jan 06, 2019 12:55 am

Thank you for the background on the http/2 main change (I guess?) - makes sense it was changed in that way.

I really need to make time to read those episodes, Xav! Already pinned the articles in tabs in my browser.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Moini
Posts: 3290
Joined: Mon Oct 05, 2015 10:44 am

Re: Inkscape Tutorial in Full Circle Magazine

Postby Moini » Mon Jan 07, 2019 3:22 am

And if you ever encounter a question, such as
can’t say for certain if A4 is used as a default everywhere, or if there is a locale dependency that creates US Letter pages in the USA,

don't hesitate to ask either here or just send me an email.

(answer is: yes, it's 8.5x11 inch for en-us, and A4 everywhere else, took me 2 minutes to find out - so it wouldn't be a hassle)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)


Return to “Tricks & Tutorials”

Who is online

Users browsing this forum: No registered users and 4 guests