From 22cdac8ebac5140740d4f80b6cb7116b49d95978 Mon Sep 17 00:00:00 2001 From: Sami El Achi Date: Mon, 14 Oct 2024 10:15:58 +0400 Subject: [PATCH] Add SVG Viewer --- README.md | 1 + components/seo/SvgViewerSEO.tsx | 100 ++++++++++++++++++++++++++++++++ components/utils/tools-list.ts | 6 ++ pages/utilities/svg-viewer.tsx | 77 ++++++++++++++++++++++++ 4 files changed, 184 insertions(+) create mode 100644 components/seo/SvgViewerSEO.tsx create mode 100644 pages/utilities/svg-viewer.tsx 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(null); + + const handleChange = useCallback( + (event: React.ChangeEvent) => { + const value = event.currentTarget.value; + setInput(value); + + if (value.trim() === "") { + setSvgContent(null); + return; + } + + setSvgContent(event.target.value); + }, + [] + ); + + return ( +
+ +
+ + +
+ +
+ +
+ +
+ +