Create a simple web graphic

Course

Level 1 · Web Introduction

Module

Images and visual design

Expected effort

120–210 minutes

Estimate assumptions: You have completed the web-images lesson and can edit a text file in VS Code. The estimate includes building the SVG, placing it in HTML, testing both themes, and the self-check. Optional extension work is not included.

Outcome

You will create a small SVG project mark in a text file and add it to your profile page. The graphic will remain sharp at different rendered sizes and provide an appropriate text alternative.

Why this matters

Logos, icons, diagrams, and interface marks often use vector graphics. SVG stores shapes and coordinates instead of a fixed grid of image pixels, so one file can scale across many rendered sizes.

What you will practice

• Distinguish vector graphics from raster images by how they store visual information.
• Explain how an SVG viewBox defines an internal coordinate system.
• Create a graphic with rect, circle, and path elements.
• Use fill, stroke, stroke-width, and stroke-linecap to control appearance.
• Embed an SVG with an img element and choose a context-appropriate alt value.

What is new and what is reused

• New: SVG markup, vector shapes, the viewBox coordinate system, rect, circle, path, fill, stroke, and a fixed-color theme strategy.
• Reused: Semantic HTML, relative paths, flexible-image CSS, role-based colors, contrast, aspect ratio, file organization, and alternative text.

Starting point

Before you start

• Your completed image-profile folder from the web-images lesson.
• VS Code and a current browser.
• No separate drawing application is required for the core lesson.

Current state

The profile page contains prepared raster-image candidates. It does not yet contain a custom vector graphic.

First action

Create an empty graphic-profile folder. Copy the visible contents of image-profile into it without copying .git, then create assets/graphics.

First checkpoint

The lesson workspace still works, contains no copied repository metadata, and has assets/graphics ready for one SVG file.

Help trigger

Use the recovery note or ask for help if the SVG opens as text in the browser, shows a broken-image icon, disappears against a theme, or reports an XML parsing error.

Copy the visible project contents only. A hidden .git folder would connect this lesson workspace to an earlier repository and remote.

Required result

You have completed the lesson when graphic-profile contains:

• assets/graphics/profile-mark.svg with a 320 × 180 viewBox;
• a dark-green rounded background, light browser-window shape, coral circle, and three green lines;
• root title and desc elements that describe the standalone graphic;
• no editor metadata, external resource, script, or embedded raster image;
• an img element in index.html with src, width, height, and a context-appropriate alt value;
• a sharp result at small and large rendered sizes;
• a result that remains distinguishable in the page’s light and dark themes; and
• a page that still works at about 320px width, 200% zoom, and keyboard navigation.

Compare raster and vector storage

A raster file stores colored pixels. Enlarging it far beyond its intrinsic dimensions can reveal pixel edges or blur from interpolation.

An SVG file stores elements, coordinates, and drawing properties as text. The browser recalculates the shapes for the rendered size. The file can remain sharp when the same graphic appears at 160 × 90 or 640 × 360 CSS pixels.

SVG does not make every image smaller or more suitable. A photograph contains too much irregular detail for a small hand-authored SVG. Use SVG for shapes, lines, type converted with care, and other vector-friendly content.

Content	Suitable starting format	Reason
Workspace photograph	WebP, JPEG, or AVIF	The image contains many changing pixel colors
Simple project mark	SVG	The image consists of a few geometric shapes
Screenshot	PNG or another tested raster format	Exact interface pixels matter
Repeating icon set	SVG	Shapes must stay sharp at several sizes

Read the SVG coordinate system

The viewBox attribute defines an internal coordinate area. This lesson uses:

viewBox="0 0 320 180"

The four numbers mean:

1. minimum x-coordinate: 0;
2. minimum y-coordinate: 0;
3. viewBox width: 320 units; and
4. viewBox height: 180 units.

The origin is at the top-left in this graphic. The x-coordinate increases toward the right. The y-coordinate increases downward.

SVG coordinate diagram

The viewBox connects numbers in the file to positions in the graphic

Read the coordinate map first, then compare it with the finished mark.

Coordinate map

Finished graphic

The same coordinate relationships remain when CSS displays the SVG at a different size.

The four viewBox numbers define the internal coordinate area. Shape coordinates stay in that area while the complete SVG scales to its rendered size.

The internal units do not have to equal the rendered CSS pixels. A shape at x="28" stays at the same relative place when the whole 320 × 180 viewBox scales.

Create the SVG document

Create assets/graphics/profile-mark.svg in VS Code. Add the root element, accessible text, and background:

assets/graphics/profile-mark.svg — first working state

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 320 180"
  width="320"
  height="180"
>
  <title>Profile project mark</title>
  <desc>A dark green panel containing a light browser window.</desc>

  <rect width="320" height="180" rx="24" fill="#194541" />
  <rect x="28" y="30" width="264" height="120" rx="12" fill="#fbfdfc" />
</svg>

The parts have specific jobs:

• xmlns declares the SVG namespace for a standalone SVG file.
• viewBox defines the internal coordinate area.
• width and height provide intrinsic dimensions and the 16:9 aspect ratio.
• title names the graphic when the SVG is opened as a standalone document.
• desc supplies a longer standalone description.
• rect draws a rectangle.
• x and y position the inner rectangle.
• width and height size a rectangle inside the viewBox.
• rx rounds the corners.
• fill sets the color inside a shape.

The first rectangle omits x and y, so both default to 0. It fills the viewBox. The second rectangle leaves a visible background around it.

Open the file directly

Save the SVG. In the VS Code Explorer, open it in a browser or enter its file path in the address bar. The dark-green rounded panel and light inner window should appear.

If the browser shows an XML error, use the reported line and column. Check for a missing quote, missing closing angle bracket, or misspelled closing tag near that location.

SVG is executable markup

An SVG can contain links, external resources, styles, animation, and scripts. Inspect SVG files from outside sources before you place them in a public project. The required lesson file uses only local shapes and descriptive text.

Checkpoint: The standalone SVG renders two shapes

What now works

profile-mark.svg opens as a 16:9 graphic with a dark rounded background and a light browser-window shape.

Files changed

assets/graphics/profile-mark.svg

What remains

Add the status circle and content lines, then embed the completed SVG in the profile page.

Next action

Add one circle after the two rect elements.

If it does not work

If the browser shows code instead of a graphic, confirm that the filename ends in .svg and that the root element is svg rather than html.

Add a circle and line paths

Add these elements after the two rectangles and before </svg>:

assets/graphics/profile-mark.svg — remaining shapes

  <circle cx="52" cy="54" r="8" fill="#ff5747" />

  <path
    d="M76 54H144"
    fill="none"
    stroke="#29675a"
    stroke-width="10"
    stroke-linecap="round"
  />

  <path
    d="M52 90H268 M52 118H220"
    fill="none"
    stroke="#29675a"
    stroke-width="12"
    stroke-linecap="round"
  />

The circle uses:

• cx for the center x-coordinate;
• cy for the center y-coordinate; and
• r for the radius.

The d attribute contains path commands:

• M76 54 moves the path position to coordinate (76, 54) without drawing.
• H144 draws a horizontal line to x-coordinate 144.
• A new M begins another separate segment inside the same path.
• Uppercase commands use absolute viewBox coordinates.

The line appearance comes from stroke, stroke-width, and stroke-linecap. fill="none" states that these open paths have no filled area.

Complete the standalone description

Update the desc value so it matches the finished graphic:

<desc>A dark green rounded rectangle contains a light browser window, a coral status dot, and three green content lines.</desc>

The complete file should now contain two rectangles, one circle, and two path elements. Do not add visible text to the graphic. The shapes represent a browser-window mark without making a claim that depends on words inside the image.

Check

Reload the standalone SVG. Confirm that:

• the coral circle appears near the top-left of the light window;
• one short green line appears beside the circle;
• two longer green lines appear below it;
• no line extends outside the light window; and
• the graphic remains sharp when you zoom the browser to 400%.

4Assistance 4 — Compare your file with the complete SVG structure

assets/graphics/profile-mark.svg — complete reference

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 320 180"
  width="320"
  height="180"
>
  <title>Profile project mark</title>
  <desc>A dark green rounded rectangle contains a light browser window, a coral status dot, and three green content lines.</desc>

  <rect width="320" height="180" rx="24" fill="#194541" />
  <rect x="28" y="30" width="264" height="120" rx="12" fill="#fbfdfc" />
  <circle cx="52" cy="54" r="8" fill="#ff5747" />
  <path
    d="M76 54H144"
    fill="none"
    stroke="#29675a"
    stroke-width="10"
    stroke-linecap="round"
  />
  <path
    d="M52 90H268 M52 118H220"
    fill="none"
    stroke="#29675a"
    stroke-width="12"
    stroke-linecap="round"
  />
</svg>

Compare element names, closing tags, quotes, coordinates, and the order of shapes. Later elements paint over earlier elements when their areas overlap.

Use a fixed-color theme strategy

An external SVG loaded through img does not automatically receive the page’s CSS custom properties. This lesson therefore uses a fixed surface that must work in both themes:

• deep green #194541 supplies the outer surface;
• off-white #fbfdfc supplies the browser-window surface;
• coral #ff5747 marks one small point of attention; and
• green #29675a supplies the repeated lines.

The graphic does not use color as its only meaning. The window boundary, dot shape, line shapes, spacing, and position remain visible without the color names.

Do not use the coral value for normal-size text on the light surface. In this SVG, coral fills a non-text circle with a visible shape and position.

Embed the SVG in the profile page

Choose a location where the mark identifies the profile’s project area. Add the image close to the projects heading or inside a project header:

index.html — external SVG image

<img
  class="project-mark"
  src="assets/graphics/profile-mark.svg"
  width="320"
  height="180"
  alt="Stylized browser-window mark for the profile projects."
>

When an SVG is loaded through an HTML img element, the HTML alt value supplies the image’s text alternative in the page context. The SVG’s internal title and desc still describe the file when it opens separately, but they do not replace the required alt decision in this HTML use.

If nearby visible text already identifies the same project area and the mark adds no information, use alt="" instead. Keep the alt attribute present.

Add a specific size rule without breaking the shared flexible-image baseline:

styles.css — project mark

.project-mark {
  inline-size: min(100%, 20rem);
  block-size: auto;
}

The HTML dimensions preserve the 16:9 aspect ratio before the file loads. CSS limits the rendered inline size while keeping the block size automatic.

Test both page themes

If your page includes light and dark themes, test both. If it has one theme, temporarily place the graphic on both a light and dark browser-developer-tools background.

The fixed green outer surface should keep the mark boundary visible. The light window and green lines should remain distinct. Do not add a page-theme-specific filter that changes the SVG colors without retesting the whole mark.

Checkpoint: The vector graphic works in context

What now works

The completed SVG appears in the profile page, scales without blur or distortion, has a context-appropriate alt value, and remains distinguishable on light and dark surfaces.

Files changed

assets/graphics/profile-mark.svg, index.html, styles.css

What remains

Run the final structure, accessibility, narrow-width, zoom, and source-safety checks.

Next action

Inspect profile-mark.svg and confirm that it contains only the required local elements and attributes.

If it does not work

If the page shows a broken image, compare the src path with the exact assets/graphics folder and filename, including letter case.

Verify the graphic and source

1. Open profile-mark.svg as a standalone file and confirm that the browser reports no XML error.
2. Zoom the standalone file to 400%. Curves and line ends should remain sharp.
3. Open the profile page at about 320px width and confirm that the mark stays inside its containing block.
4. Zoom the page to 200% and confirm that the mark does not overlap text or links.
5. Inspect the HTML img element and confirm that width, height, and alt are present.
6. Test the graphic on both light and dark surfaces.
7. Search the SVG source for script, href, image, and foreignObject. The required file should contain none of these terms.
8. Use the keyboard to move through the page. The graphic must not create an extra focus stop because it is not interactive.

Common failure modes

• XML parsing error: Check the line named by the browser for missing quotes, angle brackets, or closing tags.
• A shape is missing: Confirm that its coordinates fall inside the 0 0 320 180 viewBox and that a later shape does not cover it.
• Lines look square: Confirm that stroke-linecap="round" is present on both paths.
• The whole graphic distorts: Remove a CSS height that conflicts with the aspect ratio and restore block-size: auto.
• The mark disappears on one surface: Keep the fixed dark-green outer rectangle and test that it has a visible boundary against the page.
• The graphic becomes a keyboard stop: Remove tabindex or a surrounding link unless the image is meant to perform a real navigation action.

Self-check

Complete these checks against the required result.

1. Confirm that profile-mark.svg uses viewBox="0 0 320 180" and explain the four numbers.
2. Point to the origin and state the direction in which the x and y coordinates increase.
3. Identify the two rect elements, one circle element, and two path elements in the source.
4. Explain the difference between fill and stroke in this graphic.
5. Read one path d value and explain what its M and H commands do.
6. Confirm that title and desc accurately describe the standalone SVG.
7. Confirm that the HTML img has a context-appropriate alt value plus width and height.
8. Zoom the SVG to 400% and confirm that shape edges remain sharp.
9. Test the page at about 320px width and 200% zoom and confirm that the graphic does not clip, overlap, or distort.
10. Test light and dark surfaces and confirm that the mark remains distinguishable without depending only on color.
11. Search the SVG and confirm that it contains no script, external resource, embedded raster image, or unexpected editor metadata.

How the SVG remains scalable

The viewBox establishes one stable coordinate system. Each shape keeps its position and size relative to that system. The browser maps the complete viewBox to the rendered dimensions while preserving the aspect ratio.

The file remains editable because the visual parts stay as named SVG elements and attributes. A raster export would turn the result into pixels and lose that structure. Keep the SVG as the source for this vector asset.

Optional SVG investigations

The required lesson is complete before these investigations. Choose one route that changes a specific vector decision.

Create a second mark with the same viewBox

Duplicate the file and replace the inner shapes with a different project symbol. Keep viewBox="0 0 320 180", the outer surface, and the same file-safety checks. Compare how a stable coordinate system helps the two marks align.

Use an inline SVG with page color roles

Place a copy of the SVG markup directly in index.html. Replace fixed fills and strokes with currentColor or CSS classes. Add role="img" and connect aria-labelledby to an internal title. Compare the accessibility and styling tradeoffs with the external img version.

Recreate the mark in a vector editor

Build the same shapes in a vector editor. Export SVG, inspect the source, and remove metadata or unsupported features that the page does not need. Compare the editor’s coordinates and element structure with the hand-authored file.

Optional references

• The MDN viewBox reference defines the four values and how the internal coordinate area maps to the SVG viewport.
• SVG in HTML from MDN compares external SVG images with inline SVG markup.
• W3C image accessibility tips covers text alternatives for external and inline SVG use.

Next step or safe stopping point

The required lesson is complete when the SVG source contains only the intended shapes and descriptions, the page embeds it with correct HTML, and every scale, theme, accessibility, and safety check passes.

Continue to Practice: Create a page asset set to apply visual design, raster-image preparation, and SVG creation as one independent result.

If you stop here, leave yourself this resume note: The profile page now contains prepared raster and vector assets. Next, open the page-asset assignment and preserve this lesson result before starting the assessed copy.