ホーム › Wiki › SVG

SVG

update create

PATH

URL

昨今のブラウザはSVGに対応しているので、プログレスサークルが欲しくなったので調査。

  • JavaScript Library
  • CSS
    • よさそうなところ
      Qiita
      ただ、今現在のブラウザか？試したサイトのCSSが影響してかは不明だけど、楕円形になった。
      個人的には面白いけど、ソースが複雑になるので、ちょっと保留した。
      あと、新しいCSSのため、ブラウザ間の安定性に疑問。
  • SVG
    font-awesome の最新版がSVGとか、流れかなぁ～と。

Pythonの選択肢としては、少し調べると。

  • Qt
    Qtは結構でかいので、ちょっと却下

    参考 - https://qiita.com/pashango2/items/b9f61ab06c78a3e2ccdd

  • svgwrite
    https://pypi.org/project/svgwrite/
    使ってみた感じ、やりたいことを手軽にできないというか、ライブラリを知らないといけない。
    exampleをみながら、途中から自分でxmlを作ったほうが速いやということで変更。
    W3Cのリファレンスがまとめてあったので活用する。 svgwrite
  • xml
    仕様の通りにXMLを作成する

プログレスバー

プログレスサークルを作成するのに使用
https://www.w3.org/TR/SVG/paths.html

こんな感じ
h100xw100-s2-80%
画像というより、プログラムだよなぁ～ということでプログラムにカテゴライズ

Cf

import qrcode.image.svg Qrcodeをsvgで表示

グラデーション

https://triple-underscore.github.io/SVG11/pservers.html http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_09.htm

スター

参考: https://codepen.io/brianknapp/pen/JEotD/

Memo

Vivus - stroke animation

Updated: (JST)