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"}]