Transcript

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