qtsvg: add very basic QSvgWidget based example, with an animated SVG

The only example or manual test using QSvgWidget was delayedencoding
which isn't about animations at all.

This example can serve as basis for testing more QSvgWidget features
in the future. It includes a tabwidget with a second QSvgWidget in order
to test the showing/hiding of QSvgWidget.

Change-Id: I9c26f91e7f966fbc15e6a873ae44d35cb98adb07
Reviewed-by: Eirik Aavitsland <eirik.aavitsland@qt.io>
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>

7 files changed, 396 insertions, 0 deletions

diff --git a/tests/manual/examples/CMakeLists.txt b/tests/manual/examples/CMakeLists.txt
index 4ef9fca..4b24fe2 100644
--- a/tests/manual/examples/CMakeLists.txt
+++ b/tests/manual/examples/CMakeLists.txt
@@ -6,6 +6,7 @@ if(TARGET Qt::Widgets)
     add_subdirectory(embedded)
     add_subdirectory(svggenerator)
     add_subdirectory(svgviewer)
+    add_subdirectory(svgwidget)
     add_subdirectory(embeddedsvgviewer)
     add_subdirectory(textobject)
 endif()
diff --git a/tests/manual/examples/svgwidget/CMakeLists.txt b/tests/manual/examples/svgwidget/CMakeLists.txt
new file mode 100644
index 0000000..96b91fb
--- /dev/null
+++ b/tests/manual/examples/svgwidget/CMakeLists.txt
@@ -0,0 +1,51 @@
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+cmake_minimum_required(VERSION 3.16)
+project(svgwidget LANGUAGES CXX)
+
+set(CMAKE_AUTOMOC ON)
+
+if(NOT DEFINED INSTALL_EXAMPLESDIR)
+    set(INSTALL_EXAMPLESDIR "examples")
+endif()
+
+set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/svg/svgwidget")
+
+find_package(Qt6 REQUIRED COMPONENTS Core Gui Svg SvgWidgets Widgets)
+
+qt_add_executable(svgwidget
+    main.cpp
+)
+
+set_target_properties(svgwidget PROPERTIES
+    WIN32_EXECUTABLE FALSE
+    MACOSX_BUNDLE TRUE
+)
+
+target_link_libraries(svgwidget PUBLIC
+    Qt::Core
+    Qt::Gui
+    Qt::Svg
+    Qt::SvgWidgets
+    Qt::Widgets
+)
+
+# Resources:
+set(svgwidget_resource_files
+    "files/bubbles.svg"
+    "files/spheres.svg"
+)
+
+qt6_add_resources(svgwidget "svgwidget"
+    PREFIX
+        "/"
+    FILES
+        ${svgwidget_resource_files}
+)
+
+install(TARGETS svgwidget
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
diff --git a/tests/manual/examples/svgwidget/files/bubbles.svg b/tests/manual/examples/svgwidget/files/bubbles.svg
new file mode 100644
index 0000000..5173012
--- /dev/null
+++ b/tests/manual/examples/svgwidget/files/bubbles.svg
@@ -0,0 +1,215 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg width="20cm" height="15cm" viewBox="0 0 800 600"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink/"
+    baseProfile="tiny" version="1.2">
+  <title>Spheres</title>
+  <desc>Semi-transparent bubbles on a colored background.</desc>
+    <defs>
+      <!-- Create radial gradients for each bubble. -->
+      <radialGradient id="blueBubble" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" stop-opacity="1" />
+        <stop offset="25%" stop-color="#cdcdff" stop-opacity=".65" />
+        <stop offset="100%" stop-color="#cdaacd" stop-opacity=".75" />
+      </radialGradient>
+      <radialGradient id="redBubble" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" stop-opacity="1" />
+        <stop offset="25%" stop-color="#ffcdcd" stop-opacity=".65" />
+        <stop offset="100%" stop-color="#bbbb99" stop-opacity=".75" />
+      </radialGradient>
+      <radialGradient id="greenBubble" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" stop-opacity="1" />
+        <stop offset="25%" stop-color="#cdffcd" stop-opacity=".65" />
+        <stop offset="100%" stop-color="#99aaaa" stop-opacity=".75" />
+      </radialGradient>
+      <radialGradient id="yellowBubble" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" stop-opacity="1" />
+        <stop offset="25%" stop-color="#ffffcd" stop-opacity=".65" />
+        <stop offset="100%" stop-color="#bbbbaa" stop-opacity=".75" />
+      </radialGradient>
+      <radialGradient id="background" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="400" fx="250" fy="250">
+        <stop offset="0%" stop-color="#ffffee" />
+        <stop offset="100%" stop-color="#ccccaa" />
+      </radialGradient>
+      <linearGradient id="surface" gradientUnits="userSpaceOnUse"
+                      x1="-100" y1="200" x2="400" y2="200">
+        <stop offset="0%" stop-color="#ffffcc" />
+        <stop offset="100%" stop-color="#bbbb88" />
+      </linearGradient>
+
+      <!-- Create radial gradients for each circle to make them look like
+           spheres. -->
+      <radialGradient id="blueSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="blue" />
+        <stop offset="100%" stop-color="#222244" />
+      </radialGradient>
+      <radialGradient id="redSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="red" />
+        <stop offset="100%" stop-color="#442222" />
+      </radialGradient>
+      <radialGradient id="greenSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="green" />
+        <stop offset="100%" stop-color="#113311" />
+      </radialGradient>
+      <radialGradient id="yellowSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="yellow" />
+        <stop offset="100%" stop-color="#444422" />
+      </radialGradient>
+      <radialGradient id="shadowGrad" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="50">
+        <stop offset="0%" stop-color="black" stop-opacity="1.0" />
+        <stop offset="100%" stop-color="black" stop-opacity="0.0" />
+      </radialGradient>
+
+      <!-- Define a shadow for each sphere. -->
+      <circle id="shadow" fill="url(#shadowGrad)" cx="0" cy="0" r="100" />
+      <g id="bubble">
+        <circle fill="black" cx="0" cy="0" r="50" />
+        <circle fill="#a6ce39" cx="0" cy="0" r="33" />
+        <path fill="black" d="M 37,50 L 50,37 L 12,-1 L 22,-11 L 10,-24 L -24,10
+                              L -11,22 L -1,12 Z" />
+        <circle cx="0" cy="0" r="100" />
+      </g>
+    </defs>
+  <g>
+    <rect fill="url(#background)" x="0" y="0" width="800" height="600" />
+  </g>
+
+  <g transform="translate(200,700)">
+    <use xlink:href="#bubble" fill="url(#blueBubble)" />
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="1s" dur="10s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(315,700)">
+    <g transform="scale(0.5,0.5)">
+      <use xlink:href="#bubble" fill="url(#redBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="3s" dur="7s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(80,700)">
+    <g transform="scale(0.65,0.65)">
+      <use xlink:href="#bubble" fill="url(#greenBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="5s" dur="9s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(255,700)">
+    <g transform="scale(0.3,0.3)">
+      <use xlink:href="#bubble" fill="url(#yellowBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="2s" dur="6s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(565,700)">
+    <g transform="scale(0.4,0.4)">
+      <use xlink:href="#bubble" fill="url(#blueBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="4s" dur="8s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(715,700)">
+    <g transform="scale(0.6,0.6)">
+      <use xlink:href="#bubble" fill="url(#redBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="1s" dur="4s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(645,700)">
+    <g transform="scale(0.375,0.375)">
+      <use xlink:href="#bubble" fill="url(#greenBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="0s" dur="11s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(555,700)">
+    <g transform="scale(0.9,0.9)">
+      <use xlink:href="#bubble" fill="url(#yellowBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="3s" dur="7.5s" fill="freeze" repeatCount="indefinite" />
+  </g>
+
+  <g transform="translate(360,700)">
+    <g transform="scale(0.5,0.5)">
+      <use xlink:href="#bubble" fill="url(#blueBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="3s" dur="6s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(215,700)">
+    <g transform="scale(0.45,0.45)">
+      <use xlink:href="#bubble" fill="url(#redBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="5.5s" dur="7s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(420,700)">
+    <g transform="scale(0.75,0.75)">
+      <use xlink:href="#bubble" fill="url(#greenBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="1s" dur="9s" fill="freeze" repeatCount="indefinite" />
+  </g>
+  <g transform="translate(815,700)">
+    <g transform="scale(0.6,0.6)">
+      <use xlink:href="#bubble" fill="url(#yellowBubble)" />
+    </g>
+    <animateTransform attributeName="transform" type="translate" additive="sum"
+        values="0,0; 0,-800" begin="2s" dur="9.5s" fill="freeze" repeatCount="indefinite" />
+  </g>
+
+  <g transform="translate(225,375)" >
+    <g transform="scale(1.0,0.5)" >
+      <path d="M 0 0 L 350 0 L 450 450 L -100 450 z"
+            fill="url(#surface)" stroke="none" />
+    </g>
+  </g>
+    <g transform="translate(200,0)" >
+    <g transform="translate(200,490) scale(2.0,1.0) rotate(45)" >
+      <rect fill="#a6ce39" x="-69" y="-69" width="138" height="138" />
+      <circle fill="black" cx="0" cy="0" r="50" />
+      <circle fill="#a6ce39" cx="0" cy="0" r="33" />
+      <path fill="black" d="M 37,50 L 50,37 L 12,-1 L 22,-11 L 10,-24 L -24,10
+                            L -11,22 L -1,12 Z" />
+      <animateTransform attributeName="transform"  type="rotate" additive="sum" values="0; 360"
+	         begin="0s" dur="10s" fill="freeze" repeatCount="indefinite" />
+    </g>
+    <g transform="translate(200,375)">
+      <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+      <circle fill="url(#blueSphere)" cx="0" cy="0" r="100" />
+    </g>
+    <g transform="translate(315,440)">
+      <g transform="scale(0.5,0.5)">
+        <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+        <circle fill="url(#redSphere)" cx="0" cy="0" r="100" />
+      </g>
+    </g>
+    <g transform="translate(80,475)">
+      <g transform="scale(0.65,0.65)">
+        <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+        <circle fill="url(#greenSphere)" cx="0" cy="0" r="100" />
+      </g>
+    </g>
+    <g transform="translate(255,525)">
+      <g transform="scale(0.3,0.3)">
+        <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+        <circle fill="url(#yellowSphere)" cx="0" cy="0" r="100" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/tests/manual/examples/svgwidget/files/spheres.svg b/tests/manual/examples/svgwidget/files/spheres.svg
new file mode 100644
index 0000000..b23164b
--- /dev/null
+++ b/tests/manual/examples/svgwidget/files/spheres.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="8cm" height="8cm" viewBox="0 0 400 400"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink/"
+    baseProfile="tiny" version="1.2">
+  <title>Spheres</title>
+  <desc>Gradient filled spheres with different colors.</desc>
+    <defs>
+      <!-- Create radial gradients for each circle to make them look like
+           spheres. -->
+      <radialGradient id="blueSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="blue" />
+        <stop offset="100%" stop-color="#222244" />
+      </radialGradient>
+      <radialGradient id="redSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="red" />
+        <stop offset="100%" stop-color="#442222" />
+      </radialGradient>
+      <radialGradient id="greenSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="green" />
+        <stop offset="100%" stop-color="#113311" />
+      </radialGradient>
+      <radialGradient id="yellowSphere" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="-50">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="75%" stop-color="yellow" />
+        <stop offset="100%" stop-color="#444422" />
+      </radialGradient>
+      <radialGradient id="shadowGrad" gradientUnits="userSpaceOnUse"
+                      cx="0" cy="0" r="100" fx="-50" fy="50">
+        <stop offset="0%" stop-color="black" stop-opacity="1.0" />
+        <stop offset="100%" stop-color="white" stop-opacity="0.0" />
+      </radialGradient>
+
+      <!-- Define a shadow for each sphere. -->
+      <circle id="shadow" fill="url(#shadowGrad)" cx="0" cy="0" r="100" />
+    </defs>
+  <g fill="#ffee99" stroke="none" >
+    <rect x="0" y="0" width="400" height="400" />
+  </g>
+  <g fill="white" stroke="none" >
+    <rect x="0" y="175" width="400" height="225" />
+  </g>
+  <g transform="translate(200,175)">
+    <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+    <circle fill="url(#blueSphere)" cx="0" cy="0" r="100" />
+  </g>
+  <g transform="translate(315,240)">
+    <g transform="scale(0.5,0.5)">
+      <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+      <circle fill="url(#redSphere)" cx="0" cy="0" r="100" />
+    </g>
+  </g>
+  <g transform="translate(80,275)">
+    <g transform="scale(0.65,0.65)">
+      <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+      <circle fill="url(#greenSphere)" cx="0" cy="0" r="100" />
+    </g>
+  </g>
+  <g transform="translate(255,325)">
+    <g transform="scale(0.3,0.3)">
+      <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" />
+      <circle fill="url(#yellowSphere)" cx="0" cy="0" r="100" />
+    </g>
+  </g>
+</svg>
diff --git a/tests/manual/examples/svgwidget/main.cpp b/tests/manual/examples/svgwidget/main.cpp
new file mode 100644
index 0000000..0a536ce
--- /dev/null
+++ b/tests/manual/examples/svgwidget/main.cpp
@@ -0,0 +1,40 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QApplication>
+#include <QCommandLineParser>
+#include <QCommandLineOption>
+#include <QStringList>
+#include <QTabWidget>
+#include <QSvgWidget>
+
+int main(int argc, char **argv)
+{
+    QApplication app(argc, argv);
+    QCoreApplication::setApplicationName("SVG Widget");
+    QGuiApplication::setApplicationDisplayName(QCoreApplication::applicationName());
+    QCoreApplication::setOrganizationName("QtProject");
+    QCoreApplication::setApplicationVersion(QT_VERSION_STR);
+
+    QCommandLineParser parser;
+    parser.setApplicationDescription("Qt SVG Widget");
+    parser.addHelpOption();
+    parser.addVersionOption();
+    parser.addPositionalArgument("file", "The file to open.");
+    parser.process(app);
+
+    const QString fileName = parser.positionalArguments().value(0, QLatin1String(":/files/bubbles.svg"));
+
+    QTabWidget top;
+
+    auto widget = new QSvgWidget(&top);
+    top.addTab(widget, "Bubbles");
+    widget->load(fileName);
+
+    auto otherWidget = new QSvgWidget(&top);
+    top.addTab(otherWidget, "Spheres");
+    otherWidget->load(QLatin1String(":/files/spheres.svg"));
+
+    top.show();
+    return app.exec();
+}
diff --git a/tests/manual/examples/svgwidget/svgwidget.pro b/tests/manual/examples/svgwidget/svgwidget.pro
new file mode 100644
index 0000000..abff58e
--- /dev/null
+++ b/tests/manual/examples/svgwidget/svgwidget.pro
@@ -0,0 +1,10 @@
+HEADERS       =
+RESOURCES     = svgwidget.qrc
+SOURCES       = main.cpp
+QT           += widgets svg svgwidgets
+
+CONFIG += console
+
+# install
+target.path = $$[QT_INSTALL_EXAMPLES]/svg/svgwidget
+INSTALLS += target
diff --git a/tests/manual/examples/svgwidget/svgwidget.qrc b/tests/manual/examples/svgwidget/svgwidget.qrc
new file mode 100644
index 0000000..126c0a3
--- /dev/null
+++ b/tests/manual/examples/svgwidget/svgwidget.qrc
@@ -0,0 +1,7 @@
+<!DOCTYPE RCC><RCC version="1.0">
+<qresource prefix="/">
+  <file>files/bubbles.svg</file>
+  <file>files/spheres.svg</file>
+</qresource>
+</RCC>
+