README
@hyperapp/svg
Draw SVG with plain functions.
HTML's evil twin. Here's a collection of functions—one for each SVG tag—to help you get started with SVG in Hyperapp.
Want to draw some circles? Try this example in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { app } from "https://unpkg.com/hyperapp"
import { main } from "https://unpkg.com/@hyperapp/html?module"
import { svg, use, circle } from "https://unpkg.com/@hyperapp/svg?module"
app({
init: {},
view: () =>
main([
svg({ viewBox: "0 0 30 10" }, [
circle({ id: "symbol", cx: 5, cy: 5, r: 4, stroke: "#0366d6" }),
use({ href: "#symbol", x: 10, fill: "#0366d6" }),
use({ href: "#symbol", x: 20, fill: "white" }),
]),
]),
node: document.getElementById("app"),
})
</script>
</head>
<body>
<main id="app"></main>
</body>
</html>
Installation
npm install @hyperapp/html
Then with a module bundler like Rollup or Webpack import it in your application and get right down to business.
import { svg, use, circle } from "@hyperapp/svg"
Don't want to set up a build step? Import it in a <script> tag as a module.
<script type="module">
import { svg, use, circle } from "https://unpkg.com/@hyperapp/svg?module"
</script>