35  Vector Images

Figure 35.1: Vector image file formats
PDF — Portable Document Format
  • Preserves document formatting across platforms
  • Can embed various media types
  • Capable of multi-page
SVG — Scalable Vector Graphics
  • XML-based vector graphics
  • Scalable
JSON

definition

XML

definition

webXP

definition

AI — Adobe Illustrator
  • Adobe Illustrator proprietary format for vector images.
EPS — Encapsulated PostScript
  • Commonly used in print

SVG files can be further

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
  <defs>
    <style>
      .cls-1 {
        fill: #000;
        stroke-width: 0px;
      }

      .cls-2 {
        fill: none;
        stroke: #7800bf;
        stroke-linejoin: round;
      }
    </style>
  </defs>
  <g>
    <line class="cls-2" x1="5" y1="5" x2="25" y2="25"/>
    <line class="cls-2" x1="5" y1="25" x2="25" y2="5"/>
  </g>
  <path class="cls-1" d="M29,1v28H1V1h28M30,0H0v30h30V0h0Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
  <path d="m5 5 20 20M5 25 25 5" style="fill:none;stroke:#7800bf"/>
  <path d="M29 1v28H1V1zm1-1H0v30h30z" style="fill:#000;stroke-width:0"/>
</svg>

thsi is some text and some more

This can be converted to a variable to be used throughout a document:

$purple-x: url('data:image/svg+xml,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
  <path d="m5 5 20 20M5 25 25 5" style="fill:none;stroke:#7800bf"/>
  <path d="M29 1v28H1V1zm1-1H0v30h30z" style="fill:#000;stroke-width:0"/>
</svg>');

You can add an svg image using the HTML svg tag directly into the text. This line nests the svg tag inside a span tag, to produce and in the middle of the sentence. You can go outside the viewport and continue writing. Here’s another example with span inline .

Use font awesome icons from the standard library as part of inline text, like this or this .

Logos from the brands collection, like and , are also available. They all inherit the primary color.

Look at the sizing chart to see how you can adjust their size, like 2xl , or 5x and even use \(\LaTeX\) notation like Huge . Adding a title is also possible and is advisable for accessibility.

You can use it as a text inside.