差異處

這裏顯示兩個版本的差異處。

--- computer:web:svg [2015/07/20 07:49] – [SVG] wm
+++ computer:web:svg [2025/08/09 15:33] (目前版本) – [技巧] wm
@@ 行 4: / 行 4: @@
   * [[http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility|Creating SVG vector graphics for maximum browser compatibility]]
   * [[http://www.sitepoint.com/tips-accessible-svg/|Tips for Creating Accessible SVG]]
+  * [[https://css-tricks.com/accessible-svgs/|Accessible SVGs]]
   * [[http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-pitfalls|Tips For Avoiding Common SVG Pitfalls]]
   * [[http://slides.com/sarasoueidan/styling-animating-svgs-with-css?token=jCcrBSyuS6CmMQsd8Aof3TpxyZQr#/|Styling & Animating Scalable Vector Graphics with CSS]]
   * [[http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version|Animating SVG with CSS and SMIL]]
   * Use SVGs as pseudo elements<code>a::before{content: url('/img/icon.svg')}</code>
-===Use===
+====Path====
+  * [[https://www.nan.fyi/svg-paths|Understanding SVG Paths]]
+  * [[http://tavmjong.free.fr/blog/?p=1257|Paths: Stroking and Offsetting]]
+====Text====
+  * [[https://medium.com/technology-coding/svg-text-%E7%B0%A1%E4%BB%8B%E8%88%87%E7%AF%84%E4%BE%8B-665a011b5a48|SVG Text 簡介與範例]]
+====Use====
   * [[http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/|Styling SVG <use> Content with CSS]]
-===Fill===
+====Fill====
   * [[http://css-tricks.com/cascading-svg-fill-color/|Cascading SVG Fill Color]]
   * [[http://www.sitepoint.com/understanding-svg-fill-rule-property/|Understanding the SVG fill-rule Property]]
-===Filter===
+====Filter====
+  * [[http://jorgeatgu.github.io/svg-filters/|SVG Filters]]
   * [[http://www.benknowscode.com/2013/09/using-svg-filters-to-create-shape-outlines.html|Using SVG Filters to Create Outlines of Shapes]]
   * [[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]]
-===Animation===
+====viewBox====
+  * [[https://wattenberger.com/guide/scaling-svg|Scaling SVG Elements]]
+====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://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil|An Intro to SVG Animation with SMIL]]
   * [[http://css-tricks.com/guide-svg-animations-smil/|A Guide to SVG Animations (SMIL)]]
-===Fragment Identifiers===
+====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]]
+  * [[https://github.com/jonathantneal/postcss-svg-fragments|postcss-svg-fragments]]
 =====教學=====
   * [[http://css-tricks.com/using-svg/|Using SVG]]
@@ 行 34: / 行 45: @@
   * [[http://www.learnsvg.com/|Learn SVG]]
   * [[http://www.oxxostudio.tw/articles/201410/svg-tutorial.html|SVG 完整教學 31 天]]
+====技巧====
+  * [[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]]
@@ 行 53: / 行 67: @@
   * [[http://alexk111.github.io/SVG-Morpheus/|SVG Morpheus]]
   * [[http://benhowdle.im/deSVG/|deSVG]]
+  * [[http://anthonydugois.com/svg-path-builder/|SVG Path Builder]]
+  * [[https://github.com/lmgonzalves/segment|Segment]]
+===動畫===
+  * [[https://maxwellito.github.io/vivus/|Vivus]]
+===建模===
+  * [[https://github.com/captainwz/svg-3d-builder|SVG 3D Builder]]
 ===優化===
   * [[https://github.com/RazrFalcon/SVGCleaner|SVG Cleaner]]
@@ 行 62: / 行 82: @@
 ===服務===
   * [[https://svable.com/|svable]]
+===管理===
+  * [[http://www.svgs.us/|Svgsus]]
 =====應用=====
   * [[http://www.pencilscoop.com/2014/02/animating-svg-with-clipping-masks-and-css/|Animating SVG With Clipping Masks and CSS]]
@@ 行 67: / 行 89: @@
   * [[http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit|Polygon feature design: SVG animations for fun and profit]]
   * [[http://css-tricks.com/svg-tabs-using-svg-shape-template/|SVG Tabs (Using an SVG Shape as Template)]]
-  * [[http://css-tricks.com/svg-sprites-use-better-icon-fonts/|Icon System with SVG Sprites]]
   * [[http://css-tricks.com/svg-fallbacks/|SVG Fallbacks]]
   * [[http://tavmjong.free.fr/blog/?p=1016|Blending coming to an SVG renderer near you! (Including Inkscape)]]
   * [[http://oak.is/thinking/animated-svgs/|Animated SVGs: Custom easing and timing]]
-  * [[http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/|SVG Icons FTW]]
   * [[http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/|SVG Drawing Animation]]
   * [[http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/|Shape Hover Effect with SVG]]
@@ 行 78: / 行 98: @@
   * [[http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/|Using SVG to shrink your PNGs]]
   * [[http://tympanus.net/codrops/2014/12/15/elastic-svg-elements/|Elastic SVG Elements]]
+  * [[http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/|Designing Flexible, Maintainable Pie Charts With CSS And SVG]]
+====圖示====
+  * [[http://fvsch.com/code/svg-icons/how-to/|How to work with SVG icons]]
+  * [[http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/|SVG Icons FTW]]
+  * [[http://css-tricks.com/svg-sprites-use-better-icon-fonts/|Icon System with SVG Sprites]]