| 兩邊的前次修訂版前次修改
下次修改 | 前次修改
|
| computer:web:svg [2016/12/05 08:19] – [SVG] wm | computer:web:svg [2025/08/09 15:33] (目前版本) – [技巧] wm |
|---|
| * Use SVGs as pseudo elements<code>a::before{content: url('/img/icon.svg')}</code> | * Use SVGs as pseudo elements<code>a::before{content: url('/img/icon.svg')}</code> |
| ====Path==== | ====Path==== |
| | * [[https://www.nan.fyi/svg-paths|Understanding SVG Paths]] |
| * [[http://tavmjong.free.fr/blog/?p=1257|Paths: Stroking and Offsetting]] | * [[http://tavmjong.free.fr/blog/?p=1257|Paths: Stroking and Offsetting]] |
| ====Text==== | ====Text==== |
| * [[http://css-tricks.com/look-svg-light-source-filters/|A Look at SVG Light Source Filters]] | * [[http://css-tricks.com/look-svg-light-source-filters/|A Look at SVG Light Source Filters]] |
| * [[http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome/|The Art Of The SVG Filter And Why It Is Awesome]] | * [[http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome/|The Art Of The SVG Filter And Why It Is Awesome]] |
| | ====viewBox==== |
| | * [[https://wattenberger.com/guide/scaling-svg|Scaling SVG Elements]] |
| ====Animation==== | ====Animation==== |
| | * [[https://blog.logrocket.com/animating-svg-with-css-83e8e27d739c|Animating SVG with CSS]] |
| * [[http://oak.is/thinking/animated-svgs/|Animated SVGs: Custom easing and timing]] | * [[http://oak.is/thinking/animated-svgs/|Animated SVGs: Custom easing and timing]] |
| * [[http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil|An Intro to SVG Animation with SMIL]] | * [[http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil|An Intro to SVG Animation with SMIL]] |
| * [[http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/|Better SVG Sprites With Fragment Identifiers]] | * [[http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/|Better SVG Sprites With Fragment Identifiers]] |
| * [[http://betravis.github.io/icon-methods/svg-sprite-sheets.html|SVG Sprite Sheets]] | * [[http://betravis.github.io/icon-methods/svg-sprite-sheets.html|SVG Sprite Sheets]] |
| | * [[https://github.com/jonathantneal/postcss-svg-fragments|postcss-svg-fragments]] |
| =====教學===== | =====教學===== |
| * [[http://css-tricks.com/using-svg/|Using SVG]] | * [[http://css-tricks.com/using-svg/|Using SVG]] |
| ====技巧==== | ====技巧==== |
| * [[http://www.clicktorelease.com/blog/svg-google-logo-in-305-bytes|Can the new Google logo be 305 bytes?]] | * [[http://www.clicktorelease.com/blog/svg-google-logo-in-305-bytes|Can the new Google logo be 305 bytes?]] |
| | * [[https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters|Simulating Hand-Drawn Motion with SVG Filters]] |
| ====書籍==== | ====書籍==== |
| * [[http://svgpocketguide.com/book/|Pocket Guide to Writing SVG]] | * [[http://svgpocketguide.com/book/|Pocket Guide to Writing SVG]] |
| ===動畫=== | ===動畫=== |
| * [[https://maxwellito.github.io/vivus/|Vivus]] | * [[https://maxwellito.github.io/vivus/|Vivus]] |
| | ===建模=== |
| | * [[https://github.com/captainwz/svg-3d-builder|SVG 3D Builder]] |
| ===優化=== | ===優化=== |
| * [[https://github.com/RazrFalcon/SVGCleaner|SVG Cleaner]] | * [[https://github.com/RazrFalcon/SVGCleaner|SVG Cleaner]] |
