Use SVG icons in default style

Replaced the png graphics for icons with SVG.

Change-Id: Icc50ef9dfdb14051eb1405e8653582763e3d9032
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

20 files changed, 223 insertions, 23 deletions

diff --git a/src/virtualkeyboard/content/styles/default/default_style.qrc b/src/virtualkeyboard/content/styles/default/default_style.qrc
index de821723..8c691ce6 100644
--- a/src/virtualkeyboard/content/styles/default/default_style.qrc
+++ b/src/virtualkeyboard/content/styles/default/default_style.qrc
@@ -1,14 +1,14 @@
 <RCC>
     <qresource prefix="/content/styles/default">
         <file>style.qml</file>
-        <file>images/backspace-868482.png</file>
-        <file>images/check-868482.png</file>
-        <file>images/enter-868482.png</file>
-        <file>images/globe-868482.png</file>
-        <file>images/hidekeyboard-868482.png</file>
-        <file>images/search-868482.png</file>
-        <file>images/shift-80c342.png</file>
-        <file>images/shift-868482.png</file>
-        <file>images/shift-c5d6b6.png</file>
+        <file>images/backspace-868482.svg</file>
+        <file>images/check-868482.svg</file>
+        <file>images/enter-868482.svg</file>
+        <file>images/globe-868482.svg</file>
+        <file>images/hidekeyboard-868482.svg</file>
+        <file>images/search-868482.svg</file>
+        <file>images/shift-80c342.svg</file>
+        <file>images/shift-868482.svg</file>
+        <file>images/shift-c5d6b6.svg</file>
     </qresource>
 </RCC>
diff --git a/src/virtualkeyboard/content/styles/default/images/backspace-868482.png b/src/virtualkeyboard/content/styles/default/images/backspace-868482.png
deleted file mode 100644
index ac1c6b10..00000000
--- a/src/virtualkeyboard/content/styles/default/images/backspace-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/backspace-868482.svg b/src/virtualkeyboard/content/styles/default/images/backspace-868482.svg
new file mode 100644
index 00000000..fb607bea
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/backspace-868482.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-420 107 159 88" enable-background="new -420 107 159 88" xml:space="preserve">
+<g>
+	<rect x="-420" y="107" fill="none" width="159" height="88"/>
+	<g>
+		<g>
+			<path fill="#868482" d="M-261.2,195H-376l-44-44l44-44h114.8V195z M-371.3,183.7h98.8v-65.4h-98.8L-404,151L-371.3,183.7z"/>
+		</g>
+		<g>
+			<g>
+				
+					<rect x="-332.7" y="123.2" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -665.0558 26.5252)" fill="#868482" width="11.3" height="55.7"/>
+			</g>
+			<g>
+				
+					<rect x="-354.9" y="145.4" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -665.0499 26.5255)" fill="#868482" width="55.7" height="11.3"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/check-868482.png b/src/virtualkeyboard/content/styles/default/images/check-868482.png
deleted file mode 100644
index 1336c2b3..00000000
--- a/src/virtualkeyboard/content/styles/default/images/check-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/check-868482.svg b/src/virtualkeyboard/content/styles/default/images/check-868482.svg
new file mode 100644
index 00000000..c8af5f3e
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/check-868482.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-414 91 170 119" enable-background="new -414 91 170 119" xml:space="preserve">
+<g>
+	<polygon fill="#868482" points="-351.7,210 -414,147.7 -402.7,136.3 -351.7,187.3 -255.3,91 -244,102.3 	"/>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/enter-868482.png b/src/virtualkeyboard/content/styles/default/images/enter-868482.png
deleted file mode 100644
index 32808241..00000000
--- a/src/virtualkeyboard/content/styles/default/images/enter-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/enter-868482.svg b/src/virtualkeyboard/content/styles/default/images/enter-868482.svg
new file mode 100644
index 00000000..75080f6a
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/enter-868482.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-394 111 211 80" enable-background="new -394 111 211 80" xml:space="preserve">
+<g>
+	<rect x="-394" y="111" fill="none" width="211" height="80"/>
+	<g>
+		<rect x="-384.8" y="144.8" fill="#868482" width="201.8" height="12.3"/>
+		<rect x="-195.3" y="121.7" fill="#868482" width="12.3" height="35.3"/>
+		<polygon fill="#868482" points="-349.5,111 -349.5,190.8 -394,151.7 		"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/globe-868482.png b/src/virtualkeyboard/content/styles/default/images/globe-868482.png
deleted file mode 100644
index 7cf6dcc9..00000000
--- a/src/virtualkeyboard/content/styles/default/images/globe-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/globe-868482.svg b/src/virtualkeyboard/content/styles/default/images/globe-868482.svg
new file mode 100644
index 00000000..2d26586e
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/globe-868482.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-427 79 144 144" enable-background="new -427 79 144 144" xml:space="preserve">
+<g>
+	<rect x="-427" y="79" fill="none" width="144" height="144"/>
+	<g>
+		<path fill="#868482" d="M-355,223c-39.5,0-71.8-32.1-72-71.6c-0.2-39.7,31.9-72.2,71.6-72.4h0.7c19.1,0.1,37.1,7.6,50.6,21.1
+			s21,31.5,21.1,50.5c0.1,19.2-7.3,37.4-20.8,51c-13.5,13.7-31.6,21.3-50.8,21.4C-354.8,223-354.9,223-355,223z M-350.7,180.3v32.3
+			c9-8.1,16-17.9,20.6-28.7C-336.8,181.9-343.7,180.7-350.7,180.3z M-380,183.9c3.2,7.4,7.5,14.3,12.8,20.6c2.4,2.9,5.1,5.6,7.9,8.1
+			v-32.3C-366.3,180.7-373.2,181.9-380,183.9z M-321.8,186.9c-3.9,9.1-9.2,17.6-15.9,25.1c10.4-2.9,19.9-8.5,27.8-16.4
+			c0.5-0.5,1-1.1,1.6-1.6C-312.7,191.1-317.2,188.8-321.8,186.9z M-401.5,193.9c7.8,8.5,17.9,14.8,29.3,18c-0.5-0.6-1.1-1.2-1.6-1.8
+			c-6-7.1-10.8-14.9-14.3-23.3C-392.8,188.8-397.2,191.1-401.5,193.9z M-318.9,178.7c5.5,2.3,10.8,5.1,15.9,8.4
+			c6.5-9.4,10.4-20.3,11.2-31.8h-22.9c-0.1,1.2-0.1,2.4-0.2,3.7C-315.6,165.8-316.9,172.4-318.9,178.7z M-418.2,155.3
+			c0.8,11.8,4.8,22.6,11.2,31.8c5.1-3.3,10.4-6.1,15.8-8.4c-2.4-7.5-3.7-15.4-4.1-23.4L-418.2,155.3L-418.2,155.3z M-386.6,155.3
+			c0.3,7,1.5,13.8,3.6,20.4c7.7-2.4,15.7-3.8,23.7-4.1v-16.3H-386.6z M-350.7,171.6c8,0.4,15.9,1.7,23.6,4.1
+			c1.7-5.6,2.9-11.5,3.4-17.5c0.1-1,0.1-2,0.2-2.9h-27.2V171.6z M-314.8,146.7h23c-0.8-11.5-4.6-22.4-11.2-31.8
+			c-5.1,3.4-10.5,6.2-16.1,8.5C-316.6,130.9-315.2,138.7-314.8,146.7z M-350.7,146.7h27.2c-0.4-7-1.6-13.8-3.7-20.4
+			c-7.7,2.4-15.5,3.7-23.5,4.1V146.7z M-386.5,146.7h27.2v-16.3c-7.9-0.4-15.8-1.7-23.4-4.1c-1.8,5.8-3,11.9-3.6,18.1
+			C-386.4,145.2-386.5,145.9-386.5,146.7z M-418.2,146.7h23c0.1-1,0.1-2,0.2-3c0.6-7,2-13.8,4-20.3c-5.5-2.3-10.9-5.1-16-8.5
+			C-413.4,124-417.4,134.9-418.2,146.7z M-350.7,90.1v31.6c6.9-0.3,13.7-1.5,20.4-3.5c-3.1-7.1-7.3-13.9-12.5-20
+			C-345.2,95.3-347.9,92.6-350.7,90.1z M-379.7,118.2c6.7,2,13.5,3.2,20.4,3.5V90.1C-368.2,98-375.1,107.6-379.7,118.2z
+			 M-338.6,89.8c0.8,0.9,1.6,1.8,2.4,2.8c5.9,6.9,10.6,14.6,14.1,22.7c4.7-2,9.3-4.3,13.7-7.2c-0.6-0.6-1.2-1.2-1.8-1.9
+			C-318.2,98.2-328,92.6-338.6,89.8z M-401.5,108.1c4.4,2.8,8.9,5.2,13.6,7.1c4-9.3,9.5-17.9,16.5-25.4
+			C-383.2,93-393.5,99.4-401.5,108.1z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.png b/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.png
deleted file mode 100644
index af89960f..00000000
--- a/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.svg b/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.svg
new file mode 100644
index 00000000..d6996b1a
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/hidekeyboard-868482.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-427 87 144 127" enable-background="new -427 87 144 127" xml:space="preserve">
+<g>
+	<rect x="-427" y="87" fill="none" width="144" height="127"/>
+	<g>
+		<g>
+			<path fill="#868482" d="M-283,177.3h-144V87h144V177.3z M-416.1,166.4h122.2V97.9h-122.2V166.4z"/>
+		</g>
+		<g>
+			<rect x="-407.5" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-388.9" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-370.2" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-351.5" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-332.8" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-314.1" y="107.2" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-407.5" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-388.9" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-370.2" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-351.5" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-332.8" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-314.1" y="126.7" fill="#868482" width="11.7" height="11.7"/>
+		</g>
+		<g>
+			<rect x="-388.9" y="146.2" fill="#868482" width="67.7" height="11.7"/>
+		</g>
+		<g>
+			<polygon fill="#868482" points="-355,202.2 -364.8,195.2 -381.1,195.2 -355,213.9 -328.9,195.2 -345.2,195.2 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/search-868482.png b/src/virtualkeyboard/content/styles/default/images/search-868482.png
deleted file mode 100644
index b9516f27..00000000
--- a/src/virtualkeyboard/content/styles/default/images/search-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/search-868482.svg b/src/virtualkeyboard/content/styles/default/images/search-868482.svg
new file mode 100644
index 00000000..6ee0ba97
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/search-868482.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-425 77 148 148" enable-background="new -425 77 148 148" xml:space="preserve">
+<g>
+	<rect x="-425" y="77" fill="none" width="148" height="148"/>
+	<g>
+		<path fill="#868482" d="M-278.2,209.7c1.6,1.6,1.6,4.1,0,5.7l-8.5,8.5c-1.6,1.6-4.1,1.6-5.7,0l-44.6-44.6c-1.6-1.6-1.6-4.1,0-5.7
+			l8.5-8.5c1.6-1.6,4.1-1.6,5.7,0L-278.2,209.7z"/>
+		<path fill="#868482" d="M-367,89c25.4,0,46,20.6,46,46s-20.6,46-46,46c-25.4,0-46-20.6-46-46S-392.4,89-367,89 M-367,77
+			c-32,0-58,26-58,58s26,58,58,58c32,0,58-26,58-58S-335,77-367,77L-367,77z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-80c342.png b/src/virtualkeyboard/content/styles/default/images/shift-80c342.png
deleted file mode 100644
index 686e6737..00000000
--- a/src/virtualkeyboard/content/styles/default/images/shift-80c342.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-80c342.svg b/src/virtualkeyboard/content/styles/default/images/shift-80c342.svg
new file mode 100644
index 00000000..07eb508e
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/shift-80c342.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-427 84 144 134" enable-background="new -427 84 144 134" xml:space="preserve">
+<g>
+	<rect x="-427" y="84" fill="none" width="144" height="134"/>
+	<g>
+		<path fill="#80C342" d="M-323.4,218h-63.4v-56.5H-427l71.9-77.5l71.9,77.5h-40.2L-323.4,218L-323.4,218z M-375.3,206.5h40.5v-56.5
+			h25.4l-45.7-49.2l-45.7,49.2h25.4L-375.3,206.5L-375.3,206.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-868482.png b/src/virtualkeyboard/content/styles/default/images/shift-868482.png
deleted file mode 100644
index 3328079c..00000000
--- a/src/virtualkeyboard/content/styles/default/images/shift-868482.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-868482.svg b/src/virtualkeyboard/content/styles/default/images/shift-868482.svg
new file mode 100644
index 00000000..f0ce6930
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/shift-868482.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-427 84 144 134" enable-background="new -427 84 144 134" xml:space="preserve">
+<g>
+	<rect x="-427" y="84" fill="none" width="144" height="134"/>
+	<g>
+		<path fill="#868482" d="M-323.4,218h-63.4v-56.5H-427l71.9-77.5l71.9,77.5h-40.2L-323.4,218L-323.4,218z M-375.3,206.5h40.5v-56.5
+			h25.4l-45.7-49.2l-45.7,49.2h25.4L-375.3,206.5L-375.3,206.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.png b/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.png
deleted file mode 100644
index 97cbea87..00000000
--- a/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.png
+++ /dev/null
diff --git a/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.svg b/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.svg
new file mode 100644
index 00000000..6cfc345d
--- /dev/null
+++ b/src/virtualkeyboard/content/styles/default/images/shift-c5d6b6.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-427 84 144 134" enable-background="new -427 84 144 134" xml:space="preserve">
+<g>
+	<rect x="-427" y="84" fill="none" width="144" height="134"/>
+	<g>
+		<path fill="#C5D6B6" d="M-323.4,218h-63.4v-56.5H-427l71.9-77.5l71.9,77.5h-40.2L-323.4,218L-323.4,218z M-375.3,206.5h40.5v-56.5
+			h25.4l-45.7-49.2l-45.7,49.2h25.4L-375.3,206.5L-375.3,206.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/virtualkeyboard/content/styles/default/style.qml b/src/virtualkeyboard/content/styles/default/style.qml
index f320e624..e0556404 100644
--- a/src/virtualkeyboard/content/styles/default/style.qml
+++ b/src/virtualkeyboard/content/styles/default/style.qml
@@ -112,8 +112,10 @@ KeyboardStyle {
             Image {
                 id: backspaceKeyIcon
                 anchors.centerIn: parent
-                scale: keyIconScale
-                source: resourcePrefix + "images/backspace-868482.png"
+                sourceSize.width: 159 * keyIconScale
+                sourceSize.height: 88 * keyIconScale
+                smooth: false
+                source: resourcePrefix + "images/backspace-868482.svg"
             }
         }
         states: [
@@ -154,8 +156,10 @@ KeyboardStyle {
             Image {
                 id: languageKeyIcon
                 anchors.centerIn: parent
-                scale: keyIconScale
-                source: resourcePrefix + "images/globe-868482.png"
+                sourceSize.width: 144 * keyIconScale
+                sourceSize.height: 144 * keyIconScale
+                smooth: false
+                source: resourcePrefix + "images/globe-868482.svg"
             }
         }
         states: [
@@ -197,18 +201,33 @@ KeyboardStyle {
                 id: enterKeyIcon
                 visible: enterKeyText.text.length === 0
                 anchors.centerIn: parent
-                scale: keyIconScale
+                readonly property size enterKeyIconSize: {
+                    switch (control.actionId) {
+                    case EnterKeyAction.Go:
+                    case EnterKeyAction.Send:
+                    case EnterKeyAction.Next:
+                    case EnterKeyAction.Done:
+                        return Qt.size(170, 119)
+                    case EnterKeyAction.Search:
+                        return Qt.size(148, 148)
+                    default:
+                        return Qt.size(211, 80)
+                    }
+                }
+                sourceSize.width: enterKeyIconSize.width * keyIconScale
+                sourceSize.height: enterKeyIconSize.height * keyIconScale
+                smooth: false
                 source: {
                     switch (control.actionId) {
                     case EnterKeyAction.Go:
                     case EnterKeyAction.Send:
                     case EnterKeyAction.Next:
                     case EnterKeyAction.Done:
-                        return resourcePrefix + "images/check-868482.png"
+                        return resourcePrefix + "images/check-868482.svg"
                     case EnterKeyAction.Search:
-                        return resourcePrefix + "images/search-868482.png"
+                        return resourcePrefix + "images/search-868482.svg"
                     default:
-                        return resourcePrefix + "images/enter-868482.png"
+                        return resourcePrefix + "images/enter-868482.svg"
                     }
                 }
             }
@@ -277,8 +296,10 @@ KeyboardStyle {
             Image {
                 id: hideKeyIcon
                 anchors.centerIn: parent
-                scale: keyIconScale
-                source: resourcePrefix + "images/hidekeyboard-868482.png"
+                sourceSize.width: 144 * keyIconScale
+                sourceSize.height: 127 * keyIconScale
+                smooth: false
+                source: resourcePrefix + "images/hidekeyboard-868482.svg"
             }
         }
         states: [
@@ -319,8 +340,10 @@ KeyboardStyle {
             Image {
                 id: shiftKeyIcon
                 anchors.centerIn: parent
-                scale: keyIconScale
-                source: resourcePrefix + "images/shift-868482.png"
+                sourceSize.width: 144 * keyIconScale
+                sourceSize.height: 134 * keyIconScale
+                smooth: false
+                source: resourcePrefix + "images/shift-868482.svg"
             }
             states: [
                 State {
@@ -332,7 +355,7 @@ KeyboardStyle {
                     }
                     PropertyChanges {
                         target: shiftKeyIcon
-                        source: resourcePrefix + "images/shift-c5d6b6.png"
+                        source: resourcePrefix + "images/shift-c5d6b6.svg"
                     }
                 },
                 State {
@@ -340,7 +363,7 @@ KeyboardStyle {
                     when: InputContext.shift
                     PropertyChanges {
                         target: shiftKeyIcon
-                        source: resourcePrefix + "images/shift-80c342.png"
+                        source: resourcePrefix + "images/shift-80c342.svg"
                     }
                 }
             ]