diff --git a/java-plugin/src/main/resources/fr/greencodeinitiative/l10n/java/rules/java/CRJVM204.json b/java-plugin/src/main/resources/fr/greencodeinitiative/l10n/java/rules/java/CRJVM204.json
new file mode 100644
index 000000000..199e43d9c
--- /dev/null
+++ b/java-plugin/src/main/resources/fr/greencodeinitiative/l10n/java/rules/java/CRJVM204.json
@@ -0,0 +1,15 @@
+{
+ "title": "Detect unoptimized image format",
+ "type": "CODE_SMELL",
+ "status": "ready",
+ "remediation": {
+ "func": "Constant\/Issue",
+ "constantCost": "15min"
+ },
+ "tags": [
+ "eco-design",
+ "bug",
+ "ecocode"
+ ],
+ "defaultSeverity": "Minor"
+}
diff --git a/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java b/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java
new file mode 100644
index 000000000..31ad318a8
--- /dev/null
+++ b/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java
@@ -0,0 +1,59 @@
+import java.awt.BorderLayout;
+import java.awt.Dimension;
+import java.awt.FlowLayout;
+import java.awt.LayoutManager;
+import java.io.IOException;
+import java.net.URL;
+
+import javax.swing.JEditorPane;
+import javax.swing.JFrame;
+import javax.swing.JPanel;
+import javax.swing.JScrollPane;
+
+public class SwingTester {
+ private static void createWindow() {
+ JFrame frame = new JFrame("Swing Tester");
+ frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
+ createUI(frame);
+ frame.setSize(560, 450);
+ frame.setLocationRelativeTo(null);
+ frame.setVisible(true);
+ }
+
+ private static void createUI(final JFrame frame) {
+ JPanel panel = new JPanel();
+ LayoutManager layout = new FlowLayout();
+ panel.setLayout(layout);
+
+ JEditorPane jEditorPane = new JEditorPane();
+ jEditorPane.setEditable(false);
+
+ jEditorPane.setContentType("text/html");
+ jEditorPane.setText("Le titre avec une partie en gras," +
+ " et une autre partie en bleu." +
+ " " +
+ " " + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.bmp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.tiff\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.webp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.png\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.jpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.jfif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.pjpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.pjp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.gif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.avif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.apng\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
+ "");
+
+ JScrollPane jScrollPane = new JScrollPane(jEditorPane);
+ jScrollPane.setPreferredSize(new Dimension(540, 400));
+
+ panel.add(jScrollPane);
+ panel.add(jScrollPane2);
+ frame.getContentPane().add(panel, BorderLayout.CENTER);
+ }
+}
\ No newline at end of file
diff --git a/java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java b/java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java
new file mode 100644
index 000000000..abd142116
--- /dev/null
+++ b/java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java
@@ -0,0 +1,47 @@
+import java.awt.BorderLayout;
+import java.awt.Dimension;
+import java.awt.FlowLayout;
+import java.awt.LayoutManager;
+import java.io.IOException;
+import java.net.URL;
+
+import javax.swing.JEditorPane;
+import javax.swing.JFrame;
+import javax.swing.JPanel;
+import javax.swing.JScrollPane;
+
+public class SwingTester {
+ private static void createWindow() {
+ JFrame frame = new JFrame("Swing Tester");
+ frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
+ createUI(frame);
+ frame.setSize(560, 450);
+ frame.setLocationRelativeTo(null);
+ frame.setVisible(true);
+ }
+
+ private static void createUI(final JFrame frame){
+ JPanel panel = new JPanel();
+ LayoutManager layout = new FlowLayout();
+ panel.setLayout(layout);
+
+ JEditorPane jEditorPane3 = new JEditorPane();
+ jEditorPane3.setEditable(false);
+
+ jEditorPane3.setContentType("text/html");
+ jEditorPane3.setText("Le titre avec une partie en gras," +
+ " et une autre partie en bleu." +
+ " " +
+ "");
+
+ JScrollPane jScrollPane = new JScrollPane(jEditorPane);
+ jScrollPane.setPreferredSize(new Dimension(540,400));
+
+ panel.add(jScrollPane);
+ panel.add(jScrollPane2);
+ panel.add(jScrollPane3);
+ frame.getContentPane().add(panel, BorderLayout.CENTER);
+ }
+}
\ No newline at end of file
diff --git a/java-plugin/src/test/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormatTest.java b/java-plugin/src/test/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormatTest.java
new file mode 100644
index 000000000..80f357786
--- /dev/null
+++ b/java-plugin/src/test/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormatTest.java
@@ -0,0 +1,23 @@
+package fr.greencodeinitiative.java.checks;
+
+import org.junit.jupiter.api.Test;
+import org.sonar.java.checks.verifier.CheckVerifier;
+
+public class DetectUnoptimizedImageFormatTest {
+
+ @Test
+ void test() {
+ CheckVerifier.newVerifier()
+ .onFile("src/test/files/DetectUnoptimizedImageFormat.java")
+ .withCheck(new DetectUnoptimizedImageFormat())
+ .verifyIssues();
+ }
+
+ @Test
+ void testComplient() {
+ CheckVerifier.newVerifier()
+ .onFile("src/test/files/DetectUnoptimizedFileFormatComplient.java")
+ .withCheck(new DetectUnoptimizedImageFormat())
+ .verifyNoIssues();
+ }
+}
From a2fbf1b674159dffd31f51f03e9fff135cab678e Mon Sep 17 00:00:00 2001
From: plougastela
Date: Thu, 6 Apr 2023 11:03:33 +0200
Subject: [PATCH 02/15] CRJVM204 Detect unoptimized image format
---
.../java/checks/DetectUnoptimizedImageFormat.java | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/java-plugin/src/main/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormat.java b/java-plugin/src/main/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormat.java
index 43eb24d70..2b3190b19 100644
--- a/java-plugin/src/main/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormat.java
+++ b/java-plugin/src/main/java/fr/greencodeinitiative/java/checks/DetectUnoptimizedImageFormat.java
@@ -20,7 +20,7 @@
public class DetectUnoptimizedImageFormat extends IssuableSubscriptionVisitor {
protected static final String MESSAGERULE = "Detect unoptimized image format";
- protected static final String MESSAGEERROR = "If possible, utilisation of svg image format is recommended over other image format.";
+ protected static final String MESSAGEERROR = "If possible, the utilisation of svg image format (or html tag) is recommended over other image format.";
protected static Pattern IMG_EXTENSION = Pattern.compile("\\.(bmp|ico|tiff|webp|png|jpg|jpeg|jfif|pjpeg|pjp|gif|avif|apng)");
@Override
From cc526cc44e5face12f63042f1369d6647d1db420 Mon Sep 17 00:00:00 2001
From: plougastela
Date: Thu, 6 Apr 2023 11:19:10 +0200
Subject: [PATCH 03/15] CRJVM204 Detect unoptimized image format
---
.../files/DetectUnoptimizedFileFormat.java | 59 -------------
.../files/DetectUnoptimizedImageFormat.java | 84 +++++++++++++++++++
...etectUnoptimizedImageFormatComplient.java} | 36 ++++++--
.../DetectUnoptimizedImageFormatTest.java | 2 +-
4 files changed, 114 insertions(+), 67 deletions(-)
delete mode 100644 java-plugin/src/test/files/DetectUnoptimizedFileFormat.java
create mode 100644 java-plugin/src/test/files/DetectUnoptimizedImageFormat.java
rename java-plugin/src/test/files/{DetectUnoptimizedFileFormatComplient.java => DetectUnoptimizedImageFormatComplient.java} (50%)
diff --git a/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java b/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java
deleted file mode 100644
index 31ad318a8..000000000
--- a/java-plugin/src/test/files/DetectUnoptimizedFileFormat.java
+++ /dev/null
@@ -1,59 +0,0 @@
-import java.awt.BorderLayout;
-import java.awt.Dimension;
-import java.awt.FlowLayout;
-import java.awt.LayoutManager;
-import java.io.IOException;
-import java.net.URL;
-
-import javax.swing.JEditorPane;
-import javax.swing.JFrame;
-import javax.swing.JPanel;
-import javax.swing.JScrollPane;
-
-public class SwingTester {
- private static void createWindow() {
- JFrame frame = new JFrame("Swing Tester");
- frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
- createUI(frame);
- frame.setSize(560, 450);
- frame.setLocationRelativeTo(null);
- frame.setVisible(true);
- }
-
- private static void createUI(final JFrame frame) {
- JPanel panel = new JPanel();
- LayoutManager layout = new FlowLayout();
- panel.setLayout(layout);
-
- JEditorPane jEditorPane = new JEditorPane();
- jEditorPane.setEditable(false);
-
- jEditorPane.setContentType("text/html");
- jEditorPane.setText("Le titre avec une partie en gras," +
- " et une autre partie en bleu." +
- " " +
- " " + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.bmp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.tiff\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.webp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.png\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.jpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.jfif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.pjpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.pjp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.gif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.avif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- " src=\"/media/cc0-images/grapefruit-slice-332-332.apng\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, utilisation of svg image format is recommended over other image format.}}
- "");
-
- JScrollPane jScrollPane = new JScrollPane(jEditorPane);
- jScrollPane.setPreferredSize(new Dimension(540, 400));
-
- panel.add(jScrollPane);
- panel.add(jScrollPane2);
- frame.getContentPane().add(panel, BorderLayout.CENTER);
- }
-}
\ No newline at end of file
diff --git a/java-plugin/src/test/files/DetectUnoptimizedImageFormat.java b/java-plugin/src/test/files/DetectUnoptimizedImageFormat.java
new file mode 100644
index 000000000..c8c631820
--- /dev/null
+++ b/java-plugin/src/test/files/DetectUnoptimizedImageFormat.java
@@ -0,0 +1,84 @@
+import java.awt.BorderLayout;
+import java.awt.Dimension;
+import java.awt.FlowLayout;
+import java.awt.LayoutManager;
+import java.io.IOException;
+import java.net.URL;
+
+import javax.swing.JEditorPane;
+import javax.swing.JFrame;
+import javax.swing.JPanel;
+import javax.swing.JScrollPane;
+
+public class DetectUnoptimizedImageFormat {
+
+ private String img_bmp = "test/image.bmp"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_ico = "image.ico"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_tiff = "test/path/to/image.tiff"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_webp = "test/path/to/" + "image.webp"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_jpg = "image.jpg"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_jpeg = "image.jpeg"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_jfif = "image.jfif"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_pjpeg = "image.pjpeg"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_pjp = "image.pjp"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_gif = "image.gif"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_avif = "image.avif"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ private String img_apng = "image.apng"; // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+
+
+ private static String getImagePath(String image) {
+ return "path/to/" + image;
+ }
+
+ private static void testImage() {
+ String img1 = getImagePath("test/image.bmp"); // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ String img2 = getImagePath("image.ico"); // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ String img3 = getImagePath("image.jpg"); // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ }
+
+ private static void createWindow() {
+ JFrame frame = new JFrame("Swing Tester");
+ frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
+ createUI(frame);
+ frame.setSize(560, 450);
+ frame.setLocationRelativeTo(null);
+ frame.setVisible(true);
+ }
+
+ private static void createUI(final JFrame frame) {
+ JPanel panel = new JPanel();
+ LayoutManager layout = new FlowLayout();
+ panel.setLayout(layout);
+
+ JEditorPane jEditorPane = new JEditorPane();
+ jEditorPane.setEditable(false);
+
+ jEditorPane.setContentType("text/html");
+ jEditorPane.setText("Le titre avec une partie en gras," +
+ " et une autre partie en bleu." +
+ " html tag) is recommended over other image format.}}
+ " alt=\"Grapefruit slice atop a pile of other slices\">" +
+ " " + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.bmp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.tiff\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.webp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.png\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.jpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.jfif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.pjpeg\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.pjp\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.gif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.avif\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ " src=\"/media/cc0-images/grapefruit-slice-332-332.apng\" alt=\"Grapefruit slice atop a pile of other slices\">" + // Noncompliant {{If possible, the utilisation of svg image format (or html tag) is recommended over other image format.}}
+ "");
+
+ JScrollPane jScrollPane = new JScrollPane(jEditorPane);
+ jScrollPane.setPreferredSize(new Dimension(540, 400));
+
+ panel.add(jScrollPane);
+ panel.add(jScrollPane2);
+ frame.getContentPane().add(panel, BorderLayout.CENTER);
+ }
+}
\ No newline at end of file
diff --git a/java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java b/java-plugin/src/test/files/DetectUnoptimizedImageFormatComplient.java
similarity index 50%
rename from java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java
rename to java-plugin/src/test/files/DetectUnoptimizedImageFormatComplient.java
index abd142116..c0ce54011 100644
--- a/java-plugin/src/test/files/DetectUnoptimizedFileFormatComplient.java
+++ b/java-plugin/src/test/files/DetectUnoptimizedImageFormatComplient.java
@@ -10,7 +10,19 @@
import javax.swing.JPanel;
import javax.swing.JScrollPane;
-public class SwingTester {
+public class DetectUnoptimizedImageFormat {
+
+ private String img_svg = "test/image.svg"; // Complient
+
+ private String getImagePath(String image) {
+ return "path/to/" + image;
+ }
+
+ private static void testImage() {
+ String img1 = getImagePath("test/image.svg"); // Complient
+ String img2 = getImagePath("image.svg"); // Complient
+ }
+
private static void createWindow() {
JFrame frame = new JFrame("Swing Tester");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
@@ -20,24 +32,34 @@ private static void createWindow() {
frame.setVisible(true);
}
- private static void createUI(final JFrame frame){
+ private static void createUI(final JFrame frame) {
JPanel panel = new JPanel();
LayoutManager layout = new FlowLayout();
panel.setLayout(layout);
- JEditorPane jEditorPane3 = new JEditorPane();
- jEditorPane3.setEditable(false);
+ JEditorPane jEditorPane = new JEditorPane();
+ jEditorPane.setEditable(false);
- jEditorPane3.setContentType("text/html");
- jEditorPane3.setText("Le titre avec une partie en gras," +
+ jEditorPane.setContentType("text/html");
+ jEditorPane.setText("Le titre avec une partie en gras," +
" et une autre partie en bleu." +
" " +
"");
+ JEditorPane jEditorPane1 = new JEditorPane();
+ jEditorPane1.setEditable(false);
+
+ jEditorPane1.setContentType("text/html");
+ jEditorPane1.setText("Le titre avec une partie en gras," +
+ " et une autre partie en bleu." +
+ "
+
Some advantages of using SVG :
+
+
SVGs are scalable and will render pixel-perfect at any resolution whereas JPEGs, PNGs and GIFs will not.
+
SVGs are vector images and therefore are usually much smaller in file-size than bitmap-based images.
+
SVGs can be embedded into the HTML which means they can be cached, edited directly using CSS and indexed for greater accessibility.
+
SVGs can be animated directly or by using CSS or JavaScript making it easy for web designers to add interactivity to a site.