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. +

+ +
+ +
+

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. +

+ +
+ +
+

FAQs

+ +
+
+ ); +} 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 ( +
+ +
+ + +
+ +
+ +
+ +
+ +