SVG Images

Goals

1. Describe SVG (Scalable Vector Graphics) images.
   
2. Skillfully create, edit, and use SVGs in real-world projects.

What

An SVG image is a text-based image format that describes two-dimensional graphics using XML. Instead of storing pixel data (like PNG or JPEG), it stores instructions such as “draw a circle with a red fill at position (50,50).”

SVG = Scalable Vector Graphics
File extension: .svg

Rationale (Why Use SVG?)

1. Scalability – SVGs never lose quality when resized. Ideal for logos, icons, and illustrations.
2. Small File Size – For simple graphics, SVG files are smaller than raster images.
3. Editable – Can be modified in a text editor or design application.
4. Styleable – Supports CSS styling (e.g., hover effects).
5. Interactive – Allows animations and JavaScript interactions.
6. Accessible – Text-based, searchable, and screen-reader friendly.
7. Cross-Platform – Works in all major browsers and modern design tools.

How to Create SVGs by Hand (Code Approach)

SVGs are written using XML syntax.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Circle -->
  <circle cx="100" cy="100" r="80" fill="lightblue" stroke="black" stroke-width="3"/>

  <!-- Rectangle -->
  <rect x="10" y="10" width="60" height="30" fill="tomato" />

  <!-- Line -->
  <line x1="0" y1="0" x2="200" y2="200" stroke="gray" stroke-width="2" />

  <!-- Text -->
  <text x="100" y="190" font-size="14" text-anchor="middle">Hello SVG</text>
</svg>

Common SVG Elements

- <circle> – Circle
- <rect> – Rectangle
- <line> – Line
- <path> – Complex shapes and curves
- <text> – Text labels
- <g> – Group elements
- fill / stroke – Color and outline settings

Creating with Apps

1. Affinity Designer ✅

• Fully supports SVG export.
• Go to File → Export → SVG.
• Ideal for logos, illustrations, and UI design.

2. Figma

• Web-based, collaborative design app.
• Export any frame or object as SVG.

3. Inkscape

• Free and open-source vector editor.
• Focused on SVG; great for technical illustrations.

4. Adobe Illustrator

• Professional vector design tool.
• Offers fine-grained control over SVG export.

5. Other Tools

• Boxy SVG
• SVG-edit
• Draw.io (great for flowcharts and diagrams)

Using SVGs

On the Web

Use as image:

<img src="image.svg" alt="description">

Or embed inline for more control:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- shapes and paths here -->
</svg>

In Code Projects

• Use for icons, logos, animations, data visualizations.
• Works well with JavaScript libraries like D3.js.
• Style with CSS (e.g., hover colors, animations).

In Print and Design

• Ideal for high-resolution prints.
• Use in Affinity Publisher or export to PDF.

Summary

SVGs are essential for modern design—flexible, scalable, lightweight, and powerful. Whether you hand-code them or use design tools, mastering SVG opens the door to clean, professional visuals in web and print.