Here is a minimal example which shows how to display some SVG objects
in page served by Apache2, with the help of SVG.js:

----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
</head>
<body>
  <script type="module">
    import { SVG } from '/javascript/svg.js/src/main.js'
    // initialize SVG.js
    var draw = SVG().addTo('body')

    // draw pink square
    draw.rect(100, 100).move(100, 50).fill('#f06')
  </script>
</body>
</html>

----------------------------------------------------------

And there is an example of a text with an animated path :

----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <title>animated SVG.js</title>
</head>
<body>
  <input type="text" value="Debian rules - - - - - - - - - - - >"/>
  <div id="drawing"></div>
  <script type="module">
    import { SVG } from '/javascript/svg.js/src/main.js'
    var input = document.querySelector('input[type=text]')
    var draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
    var text = draw.text(function(add) {
	add.tspan( input.value )
    })

    var textPath = text.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')

    textPath.animate(1000).ease('<>')
    .plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
    .loop(true, true)

    input.addEventListener('keyup', updateText(textPath))

    function updateText(textPath) {
	return function() {
	    textPath.tspan(this.value)
	}				
    }

    </script>
</body>
</html>


 -- Georges Khaznadar <georgesk@debian.org>, Fri,  6 Dec 2024 18:51:57 +0100
