Add SVG Viewer

components/seo/SvgViewerSEO.tsx

@@ -0,0 +1,100 @@
+export default function SvgViewerSEO() {
+  return (
+    <div className="content-wrapper">
+      <section>
+        <p>
+          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.
+        </p>
+      </section>
+
+      <section>
+        <p>
+          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.
+        </p>
+      </section>
+
+      <section>
+        <h2>How to Use Jam's SVG Viewer Tool</h2>
+        <p>
+          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.
+        </p>
+        <ul>
+          <li>
+            <b>Paste SVG code:</b> <br /> Copy and paste the SVG code you want
+            to view.
+          </li>
+          <li>
+            <b>Instant rendering:</b> <br /> See the SVG rendered in real-time
+            as you paste or edit the code.
+          </li>
+          <li>
+            <b>Simple and fast:</b> <br /> Our tool quickly renders SVG content,
+            allowing you to visualize your vector graphics instantly.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Benefits of Using an Online SVG Viewer</h2>
+        <p>
+          SVG (Scalable Vector Graphics) is a powerful format for creating
+          resolution-independent graphics. An online viewer offers several
+          advantages for working with SVG files.
+        </p>
+        <ul>
+          <li>
+            <b>Quick Visualization:</b> <br /> Instantly see how your SVG code
+            renders without needing to save files or use complex software.
+          </li>
+          <li>
+            <b>Debugging:</b> <br /> Easily spot issues in your SVG code by
+            seeing the visual output in real-time.
+          </li>
+          <li>
+            <b>Accessibility:</b> <br /> Access and view SVG content from any
+            device with an internet connection, without installing specialized
+            software.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>FAQs</h2>
+        <ul>
+          <li>
+            <b>What is SVG?</b> <br /> SVG stands for Scalable Vector Graphics,
+            a vector image format based on XML that's widely used for web
+            graphics and illustrations.
+          </li>
+          <li>
+            <b>Can I edit SVG in this viewer?</b> <br /> While our tool is
+            primarily for viewing, you can paste modified SVG code to see
+            changes in real-time.
+          </li>
+          <li>
+            <b>Is there a file size limit for SVG viewing?</b> <br /> Our viewer
+            is designed to handle most standard SVG files, but extremely large
+            or complex SVGs might affect performance.
+          </li>
+          <li>
+            <b>How secure is it to use this SVG viewer?</b> <br /> Jam's SVG
+            viewer runs entirely in your browser. We don't store or transmit
+            your SVG data, ensuring your graphics remain private.
+          </li>
+          <li>
+            <b>Can I use this viewer on mobile devices?</b> <br /> Yes, our SVG
+            viewer is responsive and works on both desktop and mobile browsers
+            for on-the-go SVG visualization.
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

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",
+  },
 ];

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<string | null>(null);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const value = event.currentTarget.value;
+      setInput(value);
+
+      if (value.trim() === "") {
+        setSvgContent(null);
+        return;
+      }
+
+      setSvgContent(event.target.value);
+    },
+    []
+  );
+
+  return (
+    <main>
+      <Meta
+        title="SVG Viewer | Free, Open Source & Ad-free"
+        description="View SVG files quickly and easily with Jam's free online SVG viewer. Just paste your SVG file and get the SVG result. That's it."
+      />
+      <Header />
+      <CMDK />
+
+      <section className="container max-w-2xl mb-12">
+        <PageHeader
+          title="SVG Viewer"
+          description="Fast, free, open source, ad-free tools."
+        />
+      </section>
+
+      <section className="container max-w-2xl mb-6">
+        <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
+          <div>
+            <Label>SVG</Label>
+            <Textarea
+              rows={6}
+              placeholder="Paste SVG here"
+              onChange={handleChange}
+              className="mb-6"
+              value={input}
+            />
+
+            <div className="flex justify-between items-center mb-2">
+              {svgContent ? (
+                <div dangerouslySetInnerHTML={{ __html: svgContent }} />
+              ) : (
+                <Label className="mb-0">No SVG loaded yet</Label>
+              )}
+            </div>
+          </div>
+        </Card>
+      </section>
+
+      <CallToActionGrid />
+
+      <section className="container max-w-2xl">
+        <SvgViewerSEO />
+      </section>
+    </main>
+  );
+}