diff --git a/README.md b/README.md
index 55cca33..c6d5c3a 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ Here is the list of all utilities:
- [Image Resizer](https://jam.dev/utilities/image-resizer)
- [CSS Units Converter](https://jam.dev/utilities/css-units-converter)
- [JWT Parser](https://jam.dev/utilities/jwt-parser)
+- [SVG Viewer](https://jam.dev/utilities/svg-viewer)
### Built With
diff --git a/components/seo/SvgViewerSEO.tsx b/components/seo/SvgViewerSEO.tsx
new file mode 100644
index 0000000..7188769
--- /dev/null
+++ b/components/seo/SvgViewerSEO.tsx
@@ -0,0 +1,100 @@
+export default function SvgViewerSEO() {
+ return (
+
+
+
+ This free tool offers a quick and easy way to view and render SVG
+ files online. If you work with vector graphics, web design, or need to
+ quickly check SVG content, you can use Jam's SVG Viewer to visualize
+ your SVG code instantly.
+
+
+
+
+
+ Simply paste your SVG code and see the rendered result immediately.
+ Built with 💜 by the developers at Jam, this tool is free,
+ open-source, and ad-free.
+
+
+
+
+ How to Use Jam's SVG Viewer Tool
+
+ Whether you're a web developer, graphic designer, or just need to
+ quickly view an SVG file, our viewer makes it easy to visualize SVG
+ content online.
+
+
+ -
+ Paste SVG code:
Copy and paste the SVG code you want
+ to view.
+
+ -
+ Instant rendering:
See the SVG rendered in real-time
+ as you paste or edit the code.
+
+ -
+ Simple and fast:
Our tool quickly renders SVG content,
+ allowing you to visualize your vector graphics instantly.
+
+
+
+
+
+ Benefits of Using an Online SVG Viewer
+
+ SVG (Scalable Vector Graphics) is a powerful format for creating
+ resolution-independent graphics. An online viewer offers several
+ advantages for working with SVG files.
+
+
+ -
+ Quick Visualization:
Instantly see how your SVG code
+ renders without needing to save files or use complex software.
+
+ -
+ Debugging:
Easily spot issues in your SVG code by
+ seeing the visual output in real-time.
+
+ -
+ Accessibility:
Access and view SVG content from any
+ device with an internet connection, without installing specialized
+ software.
+
+
+
+
+
+ FAQs
+
+ -
+ What is SVG?
SVG stands for Scalable Vector Graphics,
+ a vector image format based on XML that's widely used for web
+ graphics and illustrations.
+
+ -
+ Can I edit SVG in this viewer?
While our tool is
+ primarily for viewing, you can paste modified SVG code to see
+ changes in real-time.
+
+ -
+ Is there a file size limit for SVG viewing?
Our viewer
+ is designed to handle most standard SVG files, but extremely large
+ or complex SVGs might affect performance.
+
+ -
+ How secure is it to use this SVG viewer?
Jam's SVG
+ viewer runs entirely in your browser. We don't store or transmit
+ your SVG data, ensuring your graphics remain private.
+
+ -
+ Can I use this viewer on mobile devices?
Yes, our SVG
+ viewer is responsive and works on both desktop and mobile browsers
+ for on-the-go SVG visualization.
+
+
+
+
+ );
+}
diff --git a/components/utils/tools-list.ts b/components/utils/tools-list.ts
index 4a07f8f..1223f4a 100644
--- a/components/utils/tools-list.ts
+++ b/components/utils/tools-list.ts
@@ -119,4 +119,10 @@ export const tools = [
"Quickly generate secure hashes for your text using algorithms like SHA-256, SHA-512, MD5, and more. Ideal for password hashing, data integrity checks, and cryptographic applications.",
link: "/utilities/hash-generator",
},
+ {
+ title: "SVG Viewer",
+ description:
+ "Easily view and render SVG files online for free.",
+ link: "/utilities/svg-viewer",
+ },
];
diff --git a/pages/utilities/svg-viewer.tsx b/pages/utilities/svg-viewer.tsx
new file mode 100644
index 0000000..1a544db
--- /dev/null
+++ b/pages/utilities/svg-viewer.tsx
@@ -0,0 +1,77 @@
+import { useCallback, useState } from "react";
+import { Textarea } from "@/components/ds/TextareaComponent";
+import PageHeader from "@/components/PageHeader";
+import { Card } from "@/components/ds/CardComponent";
+import { Label } from "@/components/ds/LabelComponent";
+import Header from "@/components/Header";
+import { CMDK } from "@/components/CMDK";
+import CallToActionGrid from "@/components/CallToActionGrid";
+import Meta from "@/components/Meta";
+import SvgViewerSEO from "@/components/seo/SvgViewerSEO";
+
+export default function SVGViewer() {
+ const [input, setInput] = useState("");
+ const [svgContent, setSvgContent] = useState