Practical SVG - sgml/signature GitHub Wiki

Editors

Animation

Example

<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- Head -->
  <circle cx="100" cy="50" r="30" stroke="black" stroke-width="2" fill="none" />

  <!-- Body -->
  <line x1="100" y1="80" x2="100" y2="200" stroke="black" stroke-width="2" />

  <!-- Left Arm -->
  <line x1="100" y1="120" x2="60" y2="150" stroke="black" stroke-width="2" />

  <!-- Right Arm (Animated) -->
  <line x1="100" y1="120" x2="140" y2="150" stroke="black" stroke-width="2">
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="270 100 120"
      to="-30 100 120"
      dur="1s"
      repeatCount="indefinite"
      begin="0s"
      fill="freeze"
    />
  </line>

  <!-- Left Leg -->
  <line x1="100" y1="200" x2="70" y2="300" stroke="black" stroke-width="2" />

  <!-- Right Leg -->
  <line x1="100" y1="200" x2="130" y2="300" stroke="black" stroke-width="2" />
</svg>

References

Programmatic Vector Art

Namespace Idioms

References

Sample Code

<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- Head -->
  <circle cx="100" cy="50" r="20" stroke="black" stroke-width="2" fill="none" />
  
  <!-- Body -->
  <line x1="100" y1="70" x2="100" y2="150" stroke="black" stroke-width="2" />
  
  <!-- Arms -->
  <line x1="100" y1="90" x2="60" y2="120" stroke="black" stroke-width="2" />
  <line x1="100" y1="90" x2="140" y2="120" stroke="black" stroke-width="2" />
  
  <!-- Legs -->
  <line x1="100" y1="150" x2="70" y2="200" stroke="black" stroke-width="2" />
  <line x1="100" y1="150" x2="130" y2="200" stroke="black" stroke-width="2" />
</svg>

Form Validation

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SVG Text Validation with handleEvent</title>
  <style>
    body {
      font-family: sans-serif;
    }
    svg {
      border: 1px solid #ccc;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <svg width="500" height="200">
    <!-- Draw a border rectangle -->
    <rect x="10" y="10" width="480" height="180" fill="none" stroke="#000" />
    
    <!-- Editable text element -->
    <text id="editableText" x="20" y="50" font-size="20" fill="black">
      Click to edit me
    </text>

    <!-- Validation message text element (hidden by default) -->
    <text id="validationMsg" x="20" y="100" font-size="16" fill="red" visibility="hidden"></text>
  </svg>

  <script>
    // Get references to SVG elements.
    const textElement = document.getElementById('editableText');
    const validationMsg = document.getElementById('validationMsg');
    
    // The text node contained in <text>. (Assuming a single direct text node.)
    const textNode = textElement.firstChild;

    // Create an event handler object that implements handleEvent.
    const validationHandler = {
      handleEvent: function(event) {
        // Retrieve the updated text.
        const newText = textNode.nodeValue;

        // Validation: input text must be at least 5 characters long.
        if (newText.length < 5) {
          textElement.setAttribute('fill', 'red');
          validationMsg.textContent = 'Text must be at least 5 characters long.';
          validationMsg.setAttribute('visibility', 'visible');
        } else {
          textElement.setAttribute('fill', 'green');
          validationMsg.textContent = '';
          validationMsg.setAttribute('visibility', 'hidden');
        }
      }
    };

    // Attach the event handler to the text node for DOMCharacterDataModified.
    // Note: Although DOM mutation events are deprecated in favor of MutationObserver,
    // we use them here per your request.
    textNode.addEventListener('DOMCharacterDataModified', validationHandler, false);

    // Set up a click event to simulate text editing.
    textElement.addEventListener('click', function() {
      // Prompt the user for new text.
      const newText = prompt('Edit the text:', textNode.nodeValue);
      if (newText !== null) {
        // Directly update the text node; this change will trigger the mutation event.
        textNode.nodeValue = newText;
      }
    });
  </script>
</body>
</html>

Games

⚠️ **GitHub.com Fallback** ⚠️