Skip to content

Instantly share code, notes, and snippets.

@jimjam-slam

jimjam-slam/notes.md

Last active June 29, 2023 01:15
Show Gist options
  • Save jimjam-slam/2f283b5de7978cb79318831917064461 to your computer and use it in GitHub Desktop.
Save jimjam-slam/2f283b5de7978cb79318831917064461 to your computer and use it in GitHub Desktop.
Download ZIP
diagram-svelte-notes
Raw
notes.md

In Svelte:

  • export each Illustrator layer as a separate SVG (using the same artboard)
  • modify the SVG files:
    • remove the xml parent node;
    • rename the extension to .svelte
    • if using several layers, rename the classes to avoid collisions between them when inlining
  • import the components in svelte: `import FileName from "./FileName.svelte"
  • use the layer components sequentially in a parent component with <FileName>. wrap them in a parent div.
  • stack the layers visually by giving the parent div position: relative and the map layers position: absolute; top: 0; left: 0;. use :global([selector]) to inject the styles into the svgs
  • insert other svelte components, like buttons, in between or on top of the layers
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment