Lesson video

Hello, my name is Mrs. Jones, and I'm really pleased you decided to join this lesson today.

In this lesson, we will look at vector graphics and how to use markup to modify the way a shape looks and its position on the page.

So let's get started.

Welcome to today's lesson.

Today's lesson is called "Vector Markup" from the unit "Developing Vector Graphics." And by the end of this lesson, you'll be able to investigate the markup of a vector graphic and change an object by modifying its markup.

There are three key words to today's lesson: Markup.

Markup is code that holds details like the size, colour, and position of vector graphics.

Scalable.

Scalable is the ability to change the scale or the size of an object.

Scalable Vector Graphic, SVG, is a graphic that allows you to change the scale or size.

There are two sections to today's lesson.

The first is explore markup of vector graphics, and the second is change an object by modifying its markup.

So let's start with: explore markup of vector graphics.

All vector graphics are made up of paths.

A path is a route between two points, and it can be straight or curved.

The paths that make up the vector graphics can be edited.

A vector path has nodes at the start, end, and at changes of direction.

This path has four nodes: at the start, the end, and at the changes of direction.

Nodes can be moved or removed.

They can also be added at any point along a path.

Vector graphics are digital images that are created using paths.

A path can be a line, or many paths can be combined to form a shape.

Lines and shapes can be altered, allowing vector graphics to be easily edited.

Here you have a vector graphic showing fill and stroke properties.

The fill is the colour inside, and the stroke is the outline.

This shows the vector graphic showing the paths.

You can see just the red outline.

There is the path around that shape, that object.

An attribute is a piece of information that describes something about an image, like its fill colour or line style.

Can you think of any other attributes that an image might have? Pause the video.

Consider if you can think of any other attributes, and then I'll go through some.

Let's have a look.

We have height, width, fill colour, line colour, line thickness, line style, position or coordinates, opacity, how much you can see through it.

Well done if you got some of those.

Vector graphics are stored on computers as lists of instructions, SVG files, which include the image's attributes, such as coordinates, fill colour, or line style.

SVG, which stands for Scalable Vector Graphic, is a markup language used to describe 2D vector graphics.

SVG is a system of codes and tags which define the structure and formatting of vector graphics.

You may be familiar with other markup languages, such as HTML, Hypertext Markup Language, which is used to create webpages.

Let's have a quick check.

What does SVG stand for? Is it A, Sizable Vector Graphic; B, Scalable Vector Graphic; or C, Suitable Vector Graphic? Pause the video to consider your answer, and then we'll go through it.

Let's have a look at the answer.

The answer was B, Scalable Vector Graphic.

Well done if you got that correct.

Inside a Scalable Vector Graphic file, it looks like this.

So you can see the word "svg" at the top and at the bottom, opening and closing those tags, and lots of details inside.

The markup language shown above is what is used to produce these vector images, these shapes you can see at the bottom right.

Let's have a look at that markup language and see if you can make out which one goes for which.

So we can see that you've got the red, so you can see which one is red by the "fill = red" on there.

We also have blue.

So you can start to work out which shape is created by which line.

Let's have a look at those in more detail and look at each shape.

But let's have a check first.

Fill in the missing words: Scalable Vector Graphics, SVG, is a "blank" language used to describe 2D vector graphics.

SVG is a system of "blank" and tags which define the "blank" and "blank" of vector graphics.

You may be familiar with other markup languages, such as "blank" Hypertext Markup Language, which is used to create web pages.

And you've got the words at the bottom there: "codes," "structure," "HTML," "markup," and "formatting." Pause the video to consider which word goes where within those sentences, and then we'll go through the answer.

Let's have a look at the answer.

Scalable Vector Graphics, SVG, is a markup language used to describe 2D vector graphics.

SVG is a system of codes and tags which define the structure and formatting of vector graphics.

You may be familiar with other markup languages, such as HTML, Hypertext Markup Language, which is used to create web pages.

Well done if you got those correct.

The markup shown below draws a square 200 by 200 pixels.

You can see there the "rect" at the beginning defining it's a rectangle or a square, so that's the shape, and you have the width and the height defined as well.

Let's do an activity.

Look at the markup language and see if you can answer the following questions.

What shape do you think this would draw? Pause the video, use your worksheet, and consider your answer, and then we'll check it.

Let's check your answer.

So Izzy says, "This would draw a rectangle, rect, width 100 by height 200." And there we have it there.

And you might have picked up the red as well.

Well done if you got that correct.

Let's do the next activity.

What colour shape would this produce? Pause the video to consider your answer, and then we'll check it.

Let's check your answer.

Izzy says, "This would produce a blue circle." Well done if you got that correct.

You can see "circle" at the start of the markup tag there, and you also can see the "fill = blue," so we can see it's going to be a blue circle.

Well done if you got that correct.

The next question: If you wanted to change this square to be exactly twice the size, what would you change, and by how much? Pause the video, consider your answer, and then we'll check it.

Let's check your answer.

Izzy says, "Multiply the width and height values by two, i.

e.

, 200 by two equals 400." And you can see at the bottom there we've changed the width to 400 and the height to 400.

Well done if you got that correct.

Let's move to the second part of today's lesson: change an object by modifying its markup.

In Inkscape, the top left corner of the drawing area has the coordinates 0, 0.

You can see it there on the diagram, 0 at the top left.

In SVGs, coordinates are used to identify the position of the shape on the drawing area using X and Y coordinates.

As you can see here, the X and the Y.

So we looked at the width and the height previously, but we had X and Y in there, and this is the coordinates for where it will appear.

The coordinates of a rectangle will determine the top-left point of the shape.

For example, 100 by 100 would appear here.

You can see the dashed line on the coordinates starting at 100 by 100, top left, there.

In an ellipse, "cx" and "cy" indicate the coordinates of the centre of the ellipse.

You can see there.

"r" indicates the radius.

You can see the diagram there to show what the radius is, from the centre to the outline, and we've got 100 there.

The coordinates of a circle will determine the centre point of the shape.

So here we've got 400 by 300.

So you can see on the X you can see the 400, go down to where on the Y the 300 is, and you've got the centre point of the circle.

Let's do a quick check.

Which is the correct code for the image shown? So you can see on the coordinates there, you have a black square.

So is it A, or is it B? Pause the video to look at that markup language for each of those there, for A and B, and decide which one is the correct code for this image, and then we'll go through the answer.

Let's check your answer.

The answer was B.

Well done if you got that correct.

Can you predict the type of shape, colour, size, and position using this code? Look at this code here.

So we've got the X 400, Y 100, width 100, height 200, and fill green.

There we have it there.

So you can see there the position of 400 and 100 shows the top-left point in the corner.

The width is 100, so we're only going across, but we're going down 200, and the fill is green.

Well done if you got that.

So Sofia says, "What if a fill colour is not assigned to a shape in an SVG?" Really good question.

And Jun says, "If there is no fill colour, the shape will be black by default." Let's have a look here.

We have the X and the Y position, 100 by 100, width 100, height 200.

But there is no colour defined, so it would be black.

So can you predict the type of shape, colour, size, and position using this code? There's our coordinates and there's our position.

Well done if you got that.

How about this one? We've got circle cx 300, cy 450, r 100, and fill red.

Can you predict the type of shape, colour, size, and position using that code? Let's have a look.

You can see there the position.

Well done if you got that.

You can edit markup values in Inkscape using the XML editor.

You can see here we've got the different codes, and on the right, you can see the XML editor, where you can see the X, Y, the height, the width, and you can start to edit it within that area by typing over.

So you can see now that they're changing it to a height and width of 80, which has changed the shape.

On the left, we can see it changing the position, the Y and the X to 50.

We can see that moving around there.

So we've got those.

We've also got the style at the bottom.

You can see the ID within the line there as well.

So just to go through how we got to that: You can see over on the side we want to draw a square, and over on the right, we need to just drag out those three dots to select the XML editor, and that's how we can then create the shape, which then brings up the code for us to be able to then continue to edit it.

To change the width and height of the shape, double-click the shape using the selector tool.

You can then use the W and H boxes on the top toolbar and add in specific values.

You can see there on the screenshot the W and H representing the width and the height.

Hex codes are special codes that tell the computer exactly what colour to use.

In SVG markup, you can use hex codes to change the colour of shapes by setting the fill or stroke attribute.

So you can see here in the table you've got red, green, and blue.

They all start with a hashtag, which is how it's defined that it is a hex code there, and you have for red: #FF0000.

It is a mixture of letters and numbers that are used within this code.

You may want to use copy, paste, and duplicate when creating your image.

Select the object, then either use copy, paste, or duplicate from the edit menu, or you can use keyboard shortcuts.

Copy is control + C, paste is control + V, and duplicate is control + D.

Let's have a quick check.

How do you duplicate an object in Inkscape? Is it A, select the shape, press control and X? B, select the shape, then press control and D? C, select the shape, then press control and +? Pause the video to consider your answer, and then we'll check it.

Let's check your answer.

The answer was B, select the shape, then press control and D.

Well done if you got that correct.

Let's do the activity.

Use the skills you have learned so far to: One, create a blue square 60 by 60.

Two, duplicate the square twice.

Now make the following changes using the XML editor: Make one square twice the size of the first square.

Make the other square half the size of the first square.

Then, using the hex codes, change the fill colour of the two duplicated shapes.

Pause the video, use your worksheet, go back through the slides, and complete the activity, creating those different shapes, editing the code, and using that XML element to edit the markup.

And then we'll go through an example solution.

Let's have a look at the solution.

So here is what Izzy created, and you can see there.

Well done for completing the activity and for creating your shapes and editing them using the markup.

In summary, SVG stands for Scalable Vector Graphics, where images are stored as code, not pixels.

Each shape in your image is written in markup code with attributes like size, colour, and position.

Small changes to numbers or tags in the markup can move shapes or change how they look.

The graphics are scalable; their attributes can be changed.

Well done for completing this lesson: "Vector Markup.".