From 1586db0c11b1e9fb2f0d679bc6bc89b760d0e413 Mon Sep 17 00:00:00 2001
From: Pau Giner <pau.giner@gmail.com>
Date: Sat, 25 May 2013 10:35:49 +0200
Subject: [PATCH] vector: Add SVG versions of collapsible menu icons

SVG with a PNG fallback is added for the collapsible tab icon.
It allows SVG-capable browsers to view images at full resolution
while keeping backwards compatibility with browsers that don't support
SVG.

Implementation similar to I914da06494.

Change-Id: I0448e34bd10aa5cf83f1530a44b1555caee271b1
---
 skins/vector/images/arrow-down-focus-icon.svg | 37 +++++++++++++++++++
 skins/vector/images/arrow-down-icon.svg       | 37 +++++++++++++++++++
 skins/vector/screen.css                       | 12 ++++++
 3 files changed, 86 insertions(+)
 create mode 100644 skins/vector/images/arrow-down-focus-icon.svg
 create mode 100644 skins/vector/images/arrow-down-icon.svg

diff --git a/skins/vector/images/arrow-down-focus-icon.svg b/skins/vector/images/arrow-down-focus-icon.svg
new file mode 100644
index 0000000000..f2edf26363
--- /dev/null
+++ b/skins/vector/images/arrow-down-focus-icon.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="22"
+   height="16"
+   id="svg2">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1036.3622)"
+     id="layer1">
+    <path
+       d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z"
+       transform="matrix(2.7307791,0,0,1.576616,-11.885956,1036.4136)"
+       id="path2985"
+       style="fill:#929292;fill-opacity:1;stroke:none" />
+  </g>
+</svg>
diff --git a/skins/vector/images/arrow-down-icon.svg b/skins/vector/images/arrow-down-icon.svg
new file mode 100644
index 0000000000..9218ff28d4
--- /dev/null
+++ b/skins/vector/images/arrow-down-icon.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="22"
+   height="16"
+   id="svg2">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1036.3622)"
+     id="layer1">
+    <path
+       d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z"
+       transform="matrix(2.7307791,0,0,1.576616,-11.885956,1036.4136)"
+       id="path2985"
+       style="fill:#797979;fill-opacity:1;stroke:none" />
+  </g>
+</svg>
diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index eb4a4dda64..32c4c937e5 100644
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -219,6 +219,12 @@ div.vectorMenu {
 	float: left;
 	/* @embed */
 	background-image: url(images/arrow-down-icon.png);
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG) */
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
 	background-position: 100% 60%;
 	background-repeat: no-repeat;
 	cursor: pointer;
@@ -226,6 +232,12 @@ div.vectorMenu {
 div.vectorMenuFocus {
 	/* @embed */
 	background-image: url(images/arrow-down-focus-icon.png);
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG) */
+	/* @embed */
+	background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
+	/* @embed */
+	background-image: linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
 	background-position: 100% 60%;
 }
 /* @noflip */
-- 
2.20.1