Add 'svg/' from commit '08bd432990862bab5b840654dd437fbb2e6176e7'

git-subtree-dir: svg
git-subtree-mainline: 582f09d
git-subtree-split: 08bd432

Author: harrysarson

svg/.gitignore

@@ -0,0 +1 @@
+elm-stuff

svg/LICENSE

@@ -0,0 +1,30 @@
+Copyright (c) 2014-present, Evan Czaplicki
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of Evan Czaplicki nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

svg/README.md

@@ -0,0 +1,62 @@
+# SVG in Elm
+
+Scalable vector graphics (SVG) is a way to display lines, rectangles, circles, arcs, etc.
+
+The API is a bit wonky, but (1) it is manageable if you look through MDN docs like [these](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) and (2) you can attach event listeners to any shapes and lines you create!
+
+
+## Example
+
+```elm
+import Svg exposing (..)
+import Svg.Attributes exposing (..)
+
+main =
+  svg
+    [ width "120"
+    , height "120"
+    , viewBox "0 0 120 120"
+    ]
+    [ rect
+        [ x "10"
+        , y "10"
+        , width "100"
+        , height "100"
+        , rx "15"
+        , ry "15"
+        ]
+        []
+    , circle
+        [ cx "50"
+        , cy "50"
+        , r "50"
+        ]
+        []
+    ]
+```
+
+I highly recommend consulting the MDN docs on SVG to learn how to draw various shapes!
+
+
+## Make visualizations!
+
+SVG is great for data visualizations, and I really want people in the Elm community to explore more in that direction! My instinct is that functions like `view : data -> Svg msg` will be way easier to work with than what is available in other languages. Just give the data! No need to have data and interaction deeply interwoven in complex ways.
+
+### Make visualization packages?
+
+I think [`terezka/line-charts`](https://terezka.github.io/line-charts/) is a really great effort in this direction. Notice that [the docs](https://package.elm-lang.org/packages/terezka/line-charts/1.0.0/LineChart) present a really smooth learning path. Getting something on screen is really simple, and then it builds on that basic understanding to give you more capabilities. There are tons of examples as well. I really love seeing work like this!
+
+So if you are interested in doing something like this, I recommend:
+
+- Reading [The Visual Display of Quantitative Information](https://www.edwardtufte.com/tufte/books_vdqi) by Edward Tufte.
+- Learning about [designing for color blindness](https://www.alanzucconi.com/2015/12/16/color-blindness/)
+- Learning about different color spaces, like [CIELUV](https://en.wikipedia.org/wiki/CIELUV) for changing colors without changing the perceived brightness, [cubehelix](https://www.mrao.cam.ac.uk/~dag/CUBEHELIX/) for heatmaps with nice brightness properties, and how to do [color conversions](https://www.cs.rit.edu/~ncs/color/t_convert.html) in general
+
+In other words, try to learn as much as possible first! Anyone can show dots on a grid, but a great package will build expertise into the API itself, quietly leading people towards better design and accessibility. Ideally it will help people learn the important principles as well, because it is not just about getting data on screen, it is about helping people understand complex information!
+
+
+## Future Plans
+
+This package should only change to account for new SVG tags and attributes.
+
+Just like [`elm/html`](https://package.elm-lang.org/packages/elm/html/latest), this package is designed to be predictable. Every node takes two arguments (a list of attributes and a list of children) even though in many cases it is possible to do something nicer. So if you want nice helpers for simple shapes (for example) I recommend creating a separate package that builds upon this one.

svg/elm.json

@@ -0,0 +1,26 @@
+{
+    "type": "package",
+    "name": "elm/svg",
+    "summary": "Fast SVG, rendered with virtual DOM diffing",
+    "license": "BSD-3-Clause",
+    "version": "1.0.1",
+    "exposed-modules": {
+        "SVG": [
+            "Svg",
+            "Svg.Attributes",
+            "Svg.Events"
+        ],
+        "Optimize": [
+            "Svg.Keyed",
+            "Svg.Lazy"
+        ]
+    },
+    "elm-version": "0.19.0 <= v < 0.20.0",
+    "dependencies": {
+        "elm/core": "1.0.0 <= v < 2.0.0",
+        "elm/html": "1.0.0 <= v < 2.0.0",
+        "elm/json": "1.0.0 <= v < 2.0.0",
+        "elm/virtual-dom": "1.0.0 <= v < 2.0.0"
+    },
+    "test-dependencies": {}
+}

svg/examples/Logo.elm

@@ -0,0 +1,19 @@
+import Svg exposing (..)
+import Svg.Attributes exposing (..)
+
+main =
+  svg
+    [ version "1.1", x "0", y "0", viewBox "0 0 323.141 322.95"
+    ]
+    [ polygon [ fill "#F0AD00", points "161.649,152.782 231.514,82.916 91.783,82.916" ] []
+    , polygon [ fill "#7FD13B", points "8.867,0 79.241,70.375 232.213,70.375 161.838,0" ] []
+    , rect
+        [ fill "#7FD13B", x "192.99", y "107.392", width "107.676", height "108.167"
+        , transform "matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)"
+        ]
+        []
+    , polygon [ fill "#60B5CC", points "323.298,143.724 323.298,0 179.573,0" ] []
+    , polygon [ fill "#5A6378", points "152.781,161.649 0,8.868 0,314.432" ] []
+    , polygon [ fill "#F0AD00", points "255.522,246.655 323.298,314.432 323.298,178.879" ] []
+    , polygon [ fill "#60B5CC", points "161.649,170.517 8.869,323.298 314.43,323.298" ] []
+    ]