About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Leave a Tip!

Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!

BluePrint SVG thumbnail

BluePrint SVG

Learn how to create and import SVG code. Practical stack usage tips in RapidWeaverLearn how to create and import SVG code. Practical stack usage tips in RapidWeaver 

Categories: Demo

Transcript

0:00 [Music]
0:06 in this video I want to talk about the
0:09 blueprint SVG stack and how you prepare
0:13 your SVG images for the stack and then
0:16 how we use the stacking rapidweaver
0:19 so we're in a affinity designer document
0:22 here you can create SVG zhing lots of
0:25 different applications the SVG output
0:30 you get varies from application to
0:33 application but using this method you
0:36 should be able to make it work with
0:37 pretty much anything so what we're going
0:39 to do is we're going to export just this
0:43 grid type logo and if we then go to the
0:49 export menu now in affinity they all
0:52 work but SVG for web's probably the
0:55 simplest way to do it and we want to
0:57 just do the selection without background
0:58 and you can see how tiny that it's 1.11
1:02 kilobytes so let's just export that and
1:06 we'll call it as just something like VP
1:08 logo when we've got our SVG file you can
1:13 see it there what you don't want to do
1:15 is just try to drop that into
1:17 rapidweaver
1:18 we need to just edit it slightly and in
1:21 order to do that you're going to need to
1:22 edit it in a text editor of some sort
1:25 we're going to use drop it into sublime
1:27 text here you can use text wrangler
1:30 anything you like really but what we're
1:33 trying to do here is get rid of
1:35 everything at the start of the file
1:37 before the SVG tag so anything before
1:41 this less than symbol and SVG we want to
1:45 get rid of so let's just delete that and
1:48 then we'll just resave that file so this
1:52 is the important bit all you ever want
1:54 to paste into this stack is something
1:57 that starts with the SVG opening tag and
2:00 ends with the SVG closing tag any to the
2:04 file itself is just a collection of
2:07 paths and circles and things like that
2:10 we're going to copy this
2:13 and then we can get back to rapidweaver
2:16 you let me simply drop the xvg stack
2:18 onto the page double-click it and let's
2:22 just highlight that comment that says
2:23 place your SVG code here we'll delete
2:26 that and just pasting code that we just
2:29 got and there's our SVG straightaway now
2:33 you'll notice first of all we've got an
2:35 edit mode control here which will limit
2:37 the size of the SVG in edit mode
2:40 in the case of this one the actual view
2:43 box the size that we drew it in affinity
2:45 was 176 pixels so even at 100% it won't
2:49 get any bigger than that but if you've
2:50 got one that's drawn at 2,000 pixels or
2:53 something you don't want it that big in
2:55 edit mode so you can just use this to
2:58 just keep things in edit mode other than
3:03 that we've got pretty sort of standard
3:05 responsive image controls if you like
3:07 responsive images that have got a lot of
3:09 control
3:11 so we've got three break points some
3:13 things we've got four sizes that we can
3:14 have this SVG we've got small below 640
3:19 medium 6 42 7 6 8 and so on all the way
3:24 up to extra-large at each of these break
3:29 points we can change the size the units
3:32 of the size and the alignment so it's
3:34 very flexible in terms of sizing and
3:37 positioning now the other thing I'd say
3:40 at this point is be careful if you're
3:43 using percentage units if you don't know
3:46 what you're doing
3:46 you're SVG's can get out of control they
3:49 don't behave as a responsive image would
3:52 all the time percentage units are great
3:55 if you're floating the image somewhere
3:58 they'll behave perfectly generally try
4:02 to stick to absolute units like pixels
4:04 or browser width if you want it to be
4:07 responsibly scaled so that's a word of
4:11 warning if it goes mad turn the % units
4:14 off if you don't know what you're doing
4:16 other than that we've got a couple of
4:19 controls down the bottom to style it
4:21 we've got an elastic control it's very
4:23 nice for making sort of watermarks and
4:26 things like that and background SVG's
4:29 that you want to just not the capacity
4:32 down a bit the chroma demo so I had
4:36 these in the headers and they were just
4:39 as I think it'll pass to you about 13%
4:41 of something so just sort of watermark
4:43 the header and they were all floated at
4:45 100% width inner sections fix now we've
4:49 also down here got a couple of recolor
4:50 controls and if we just copy and paste
4:54 another instance of this stack one of
4:58 the great things about SVG's is that we
5:00 can style them with CSS which of course
5:03 we can't do with images so in the
5:06 blueprint demo in the menu I've got a
5:09 black or a very dark blue version of
5:12 this and then further down in the in the
5:16 body of the document I've got a same at
5:20 the same icon but it's on a a dark
5:22 background so if we just put this in in
5:27 a blueprint stack and it's just such a
5:30 simple color background and we want
5:32 something to be quite a dark blue it
5:36 doesn't give too much contrast okay so
5:43 that doesn't look great now that's a
5:44 completely run color combination now
5:47 normally we PNG get after then export
5:50 another PNG of a different color well we
5:54 can just recall of the strokes the
5:56 strokes the lines the fills are the
5:58 inner part of circles and rectangles but
6:02 you've grew up so if we recover the
6:04 strokes instantly we can make them black
6:06 we can make them white you can do
6:09 whatever we like we can add a filter
6:12 this as well if we want that circle will
6:15 have a fill property so we can make it
6:17 absolutely bright and garish if we want
6:20 and same code just a bit of extra CSS
6:26 applied to it there is a float setting
6:31 if you want to put an icon next to a
6:33 header so if we have a header in here
6:38 and we want this icon let's make it some
6:43 sort of reasonable size will just make
6:44 it 48 pixels all the way down and we
6:48 might want to float this to the left of
6:50 the header so we'll just say float left
6:54 and then when we preview that then that
7:00 icon is now floated to the left of the
7:02 header it's quite useful for the sort of
7:06 situations that you might use these and
7:08 that's all there is to it really so as
7:11 long as you don't mind just deleting
7:14 that bit of first bit of code off the
7:16 SVG then it's a great flexible way to
7:22 use SVG
7:22 the alternative of course is to
7:24 warehouse them as images the trouble
7:27 with that is it's another HTTP request
7:30 you've got to go to all the trouble of
7:33 warehousing them they won't be in your
7:34 project they won't go with the project
7:36 but more importantly and the reason that
7:39 I originally did this was that I had a
7:42 big SVG big in size not big in file size
7:46 in the header of the blueprint project
7:48 and I didn't want any delay as the page
7:52 loaded so this way all the SVG code is
7:55 inline in the document it's all it's
7:58 there as soon as the page is loaded so
7:59 there was never any delay in the in the
8:02 image loading now of course that's fine
8:05 we SVG's because each one of these we
8:08 saw was just over one kilobyte in code
8:11 so it's very very tiny and again don't
8:14 put large graphics into scg's or raster
8:18 graphics keep it as lines and pills and
8:21 paths and if you use text just convert
8:24 them to curves and you'll get a nice
8:25 small file size and it becomes a very
8:29 useful way to do it
8:31 so I hope that video has been useful
8:33 it's short and sweet but there's not a
8:36 lot to the stack but
8:37 it's something I've used a lot and it's
8:39 very useful in the right situation
8:41 thanks for watching and I'll see you
8:43 next time"}]
Search the page
0