Replace top and bottom area's background image

To improve scaling, replace top and bottom area's PNG image
to SVG image.

Bug-AGL: SPEC-1611

Change-Id: I547a96671c597cf3ac1ba1d3423fdb782bd93464
Signed-off-by: Tadao Tanikawa <tanikawa.tadao@jp.panasonic.com>

7 files changed, 112 insertions, 4 deletions

diff --git a/homescreen/qml/MediaAreaBlank.qml b/homescreen/qml/MediaAreaBlank.qml
index 2b888c8..c3a5f89 100644
--- a/homescreen/qml/MediaAreaBlank.qml
+++ b/homescreen/qml/MediaAreaBlank.qml
@@ -24,7 +24,7 @@ import MasterVolume 1.0
 Image {
     width: 1080
     height: 215
-    source: './images/Utility_Logo_Background-01.png'
+    source: './images/Utility_Logo_Background-01.svg'
     property bool displayVolume: false;
 
     MouseArea {
diff --git a/homescreen/qml/TopArea.qml b/homescreen/qml/TopArea.qml
index 9cff3ed..2a75cf8 100644
--- a/homescreen/qml/TopArea.qml
+++ b/homescreen/qml/TopArea.qml
@@ -22,7 +22,7 @@ import QtQuick.Controls 2.0
 Image {
     width: 1920
     height: 218
-    source: './images/TopSection_NoText_NoIcons-01.png'
+    source: './images/TopSection_NoText_NoIcons-01.svg'
     fillMode: Image.PreserveAspectCrop
 
     RowLayout {
diff --git a/homescreen/qml/images/TopSection_NoText_NoIcons-01.png b/homescreen/qml/images/TopSection_NoText_NoIcons-01.png
deleted file mode 100644
index cf9ec4e..0000000
--- a/homescreen/qml/images/TopSection_NoText_NoIcons-01.png
+++ /dev/null
diff --git a/homescreen/qml/images/TopSection_NoText_NoIcons-01.svg b/homescreen/qml/images/TopSection_NoText_NoIcons-01.svg
new file mode 100644
index 0000000..6841001
--- /dev/null
+++ b/homescreen/qml/images/TopSection_NoText_NoIcons-01.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1080 217.9"
+	 style="enable-background:new 0 0 1080 217.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.9;fill:#1B1A1D;}
+	.st1{opacity:0.9;fill:#27232B;}
+	.st2{fill:none;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
+	.st3{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
+	.st4{fill:none;stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+	.st5{fill:none;stroke:url(#SVGID_4_);stroke-miterlimit:10;}
+	.st6{opacity:0.9;fill:none;stroke:#545157;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<rect class="st0" width="784.8" height="214.3"/>
+		<rect x="784.8" y="0" class="st1" width="295.2" height="214.3"/>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="391.5756" y1="107.1501" x2="392.5756" y2="107.1501">
+			<stop  offset="0.4644" style="stop-color:#000000"/>
+			<stop  offset="0.4741" style="stop-color:#4D4B51"/>
+		</linearGradient>
+		<line class="st2" x1="392.1" y1="214.3" x2="392.1" y2="0"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="195.6923" y1="107.1501" x2="196.6923" y2="107.1501">
+			<stop  offset="0.4644" style="stop-color:#000000"/>
+			<stop  offset="0.4741" style="stop-color:#4D4B51"/>
+		</linearGradient>
+		<line class="st3" x1="196.2" y1="214.3" x2="196.2" y2="0"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="587.4589" y1="107.1501" x2="588.4589" y2="107.1501">
+			<stop  offset="0.4644" style="stop-color:#000000"/>
+			<stop  offset="0.4741" style="stop-color:#4D4B51"/>
+		</linearGradient>
+		<line class="st4" x1="588" y1="214.3" x2="588" y2="0"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="783.3421" y1="107.1501" x2="784.3421" y2="107.1501">
+			<stop  offset="0.4644" style="stop-color:#000000"/>
+			<stop  offset="0.4741" style="stop-color:#4D4B51"/>
+		</linearGradient>
+		<line class="st5" x1="783.8" y1="214.3" x2="783.8" y2="0"/>
+		<g>
+			<line class="st6" x1="815.1" y1="132" x2="983.5" y2="132"/>
+		</g>
+		<line class="st6" x1="1004.4" y1="-1.1" x2="1004.4" y2="213.2"/>
+	</g>
+</switch>
+</svg>
diff --git a/homescreen/qml/images/Utility_Logo_Background-01.png b/homescreen/qml/images/Utility_Logo_Background-01.png
deleted file mode 100644
index 21a602d..0000000
--- a/homescreen/qml/images/Utility_Logo_Background-01.png
+++ /dev/null
diff --git a/homescreen/qml/images/Utility_Logo_Background-01.svg b/homescreen/qml/images/Utility_Logo_Background-01.svg
new file mode 100644
index 0000000..c289805
--- /dev/null
+++ b/homescreen/qml/images/Utility_Logo_Background-01.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1080 215"
+	 style="enable-background:new 0 0 1080 215;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.82;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
+	.st2{opacity:0.9;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#1B1A1D;}
+</style>
+<switch>
+	<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
+		<i:pgfRef  xlink:href="#adobe_illustrator_pgf">
+		</i:pgfRef>
+	</foreignObject>
+	<g i:extraneous="self">
+		<g>
+			<g id="box_14_" class="st0">
+				<g>
+					<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="540" y1="247.5651" x2="540" y2="-6.7541">
+						<stop  offset="0.2978" style="stop-color:#FFFFFF;stop-opacity:0"/>
+						<stop  offset="0.3685" style="stop-color:#FAFAFA;stop-opacity:0.1007"/>
+						<stop  offset="0.4554" style="stop-color:#EBEBEB;stop-opacity:0.2245"/>
+						<stop  offset="0.5508" style="stop-color:#D2D2D2;stop-opacity:0.3603"/>
+						<stop  offset="0.6523" style="stop-color:#AFAFAF;stop-opacity:0.5048"/>
+						<stop  offset="0.7585" style="stop-color:#828282;stop-opacity:0.6562"/>
+						<stop  offset="0.8689" style="stop-color:#4B4B4B;stop-opacity:0.8133"/>
+						<stop  offset="0.9806" style="stop-color:#0C0C0C;stop-opacity:0.9724"/>
+						<stop  offset="1" style="stop-color:#000000"/>
+					</linearGradient>
+					<rect class="st1" width="1080" height="215"/>
+				</g>
+			</g>
+			<g id="box_17_" class="st2">
+				<g>
+					<rect class="st3" width="1080" height="215"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/homescreen/qml/images/images.qrc b/homescreen/qml/images/images.qrc
index fb991aa..37ad676 100644
--- a/homescreen/qml/images/images.qrc
+++ b/homescreen/qml/images/images.qrc
@@ -1,7 +1,7 @@
 <RCC>
     <qresource prefix="/images">
-        <file>TopSection_NoText_NoIcons-01.png</file>
-        <file>Utility_Logo_Background-01.png</file>
+        <file>TopSection_NoText_NoIcons-01.svg</file>
+        <file>Utility_Logo_Background-01.svg</file>
         <file>Utility_Logo_Grey-01.svg</file>
         <file>Utility_Music_Background-01.png</file>
         <file>Utility_Radio_Background-01.png</file>