Skip to content
YakB

SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics (with support for interactivity and animation). SVG images and their behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed.

The advantages of using vector graphics like SVG over raster graphics (like JPEG or PNG) include:

  • Scalability: SVG images can be scaled to any size without loss of quality, making them ideal for responsive web design.
  • Smaller File Size: For images with simple shapes and colors, SVG files are often smaller than their raster counterparts.
  • Editability: SVG files can be easily edited with text editors or vector graphic software.

Write SVG

Section titled “Write SVG”

SVG is a format based on XML, so you can create SVG images using any text editor. Here’s a simple example of an SVG file:

<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

Metadata

Section titled “Metadata”

SVG files can include metadata using the <metadata> element. This can be useful for adding information about the image, such as the author, description, or copyright information. Without altering the visual representation of the SVG, metadata can be included like this:

An important metadata is the license of the SVG image. Here is an example using a public domain license:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- xlmns elements are important -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
  xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" xml:space="preserve"
  viewBox="0 0 370 370" version="1.0" y="0px" x="0px">
  <g>
    <!-- SVG content goes here -->
  </g>
  <!-- define metadata using RDF (Resource Description Framework) and Dublin Core (dc) -->
  <metadata>
    <rdf:RDF>
      <cc:Work>
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
        <dc:title>Yakb Logo - modified from Cartoon Yak</dc:title>
        <dc:date>2012-05-10T12:13:39</dc:date>
        <dc:description>Yakb Logo taken from clipart - Cartoon Yak in the style of lemmling.</dc:description>
        <dc:source>https://openclipart.org/detail/169962/cartoon-yak-by-studiofibonacci</dc:source>
      </cc:Work>
      <cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
        <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
        <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
        <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
      </cc:License>
    </rdf:RDF>
  </metadata>
</svg>

Embed images

Section titled “Embed images”

You can also embed raster images (like PNG or JPEG) inside an SVG file using the <image> element. However, this defeats the purpose of using SVG as a vector format, since the embedded raster image will not scale without loss of quality. Don’t do that

svg meme This image has its own license From https://www.reddit.com/r/ProgrammerHumor/comments/sa6ls7/svg/