Skip to content

Commit d931700

Browse files
samiashisamiashi
committed
Add SVG Viewer
1 parent a5e1bf6 commit d931700

File tree

4 files changed

+184
-0
lines changed

4 files changed

+184
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ Here is the list of all utilities:
4444
- [CSS Units Converter](https://jam.dev/utilities/css-units-converter)
4545
- [JWT Parser](https://jam.dev/utilities/jwt-parser)
4646
- [UUID Generator](https://jam.dev/utilities/uuid-generator)
47+
- [SVG Viewer](https://jam.dev/utilities/svg-viewer)
4748

4849
### Built With
4950

‎components/seo/SvgViewerSEO.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
export default function SvgViewerSEO() {
2+
return (
3+
<div className="content-wrapper">
4+
<section>
5+
<p>
6+
This free tool offers a quick and easy way to view and render SVG
7+
files online. If you work with vector graphics, web design, or need to
8+
quickly check SVG content, you can use Jam's SVG Viewer to visualize
9+
your SVG code instantly.
10+
</p>
11+
</section>
12+
13+
<section>
14+
<p>
15+
Simply paste your SVG code and see the rendered result immediately.
16+
Built with 💜 by the developers at Jam, this tool is free,
17+
open-source, and ad-free.
18+
</p>
19+
</section>
20+
21+
<section>
22+
<h2>How to Use Jam's SVG Viewer Tool</h2>
23+
<p>
24+
Whether you're a web developer, graphic designer, or just need to
25+
quickly view an SVG file, our viewer makes it easy to visualize SVG
26+
content online.
27+
</p>
28+
<ul>
29+
<li>
30+
<b>Paste SVG code:</b> <br /> Copy and paste the SVG code you want
31+
to view.
32+
</li>
33+
<li>
34+
<b>Instant rendering:</b> <br /> See the SVG rendered in real-time
35+
as you paste or edit the code.
36+
</li>
37+
<li>
38+
<b>Simple and fast:</b> <br /> Our tool quickly renders SVG content,
39+
allowing you to visualize your vector graphics instantly.
40+
</li>
41+
</ul>
42+
</section>
43+
44+
<section>
45+
<h2>Benefits of Using an Online SVG Viewer</h2>
46+
<p>
47+
SVG (Scalable Vector Graphics) is a powerful format for creating
48+
resolution-independent graphics. An online viewer offers several
49+
advantages for working with SVG files.
50+
</p>
51+
<ul>
52+
<li>
53+
<b>Quick Visualization:</b> <br /> Instantly see how your SVG code
54+
renders without needing to save files or use complex software.
55+
</li>
56+
<li>
57+
<b>Debugging:</b> <br /> Easily spot issues in your SVG code by
58+
seeing the visual output in real-time.
59+
</li>
60+
<li>
61+
<b>Accessibility:</b> <br /> Access and view SVG content from any
62+
device with an internet connection, without installing specialized
63+
software.
64+
</li>
65+
</ul>
66+
</section>
67+
68+
<section>
69+
<h2>FAQs</h2>
70+
<ul>
71+
<li>
72+
<b>What is SVG?</b> <br /> SVG stands for Scalable Vector Graphics,
73+
a vector image format based on XML that's widely used for web
74+
graphics and illustrations.
75+
</li>
76+
<li>
77+
<b>Can I edit SVG in this viewer?</b> <br /> While our tool is
78+
primarily for viewing, you can paste modified SVG code to see
79+
changes in real-time.
80+
</li>
81+
<li>
82+
<b>Is there a file size limit for SVG viewing?</b> <br /> Our viewer
83+
is designed to handle most standard SVG files, but extremely large
84+
or complex SVGs might affect performance.
85+
</li>
86+
<li>
87+
<b>How secure is it to use this SVG viewer?</b> <br /> Jam's SVG
88+
viewer runs entirely in your browser. We don't store or transmit
89+
your SVG data, ensuring your graphics remain private.
90+
</li>
91+
<li>
92+
<b>Can I use this viewer on mobile devices?</b> <br /> Yes, our SVG
93+
viewer is responsive and works on both desktop and mobile browsers
94+
for on-the-go SVG visualization.
95+
</li>
96+
</ul>
97+
</section>
98+
</div>
99+
);
100+
}

‎components/utils/tools-list.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,10 @@ export const tools = [
125125
"Generate random UUIDs. Useful for creating unique identifiers for various applications such as database keys, session IDs, and more.",
126126
link: "/utilities/uuid-generator",
127127
},
128+
{
129+
title: "SVG Viewer",
130+
description:
131+
"Easily view and render SVG files online for free.",
132+
link: "/utilities/svg-viewer",
133+
},
128134
];

‎pages/utilities/svg-viewer.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { useCallback, useState } from "react";
2+
import { Textarea } from "@/components/ds/TextareaComponent";
3+
import PageHeader from "@/components/PageHeader";
4+
import { Card } from "@/components/ds/CardComponent";
5+
import { Label } from "@/components/ds/LabelComponent";
6+
import Header from "@/components/Header";
7+
import { CMDK } from "@/components/CMDK";
8+
import CallToActionGrid from "@/components/CallToActionGrid";
9+
import Meta from "@/components/Meta";
10+
import SvgViewerSEO from "@/components/seo/SvgViewerSEO";
11+
12+
export default function SVGViewer() {
13+
const [input, setInput] = useState("");
14+
const [svgContent, setSvgContent] = useState<string | null>(null);
15+
16+
const handleChange = useCallback(
17+
(event: React.ChangeEvent<HTMLTextAreaElement>) => {
18+
const value = event.currentTarget.value;
19+
setInput(value);
20+
21+
if (value.trim() === "") {
22+
setSvgContent(null);
23+
return;
24+
}
25+
26+
setSvgContent(event.target.value);
27+
},
28+
[]
29+
);
30+
31+
return (
32+
<main>
33+
<Meta
34+
title="SVG Viewer | Free, Open Source & Ad-free"
35+
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."
36+
/>
37+
<Header />
38+
<CMDK />
39+
40+
<section className="container max-w-2xl mb-12">
41+
<PageHeader
42+
title="SVG Viewer"
43+
description="Fast, free, open source, ad-free tools."
44+
/>
45+
</section>
46+
47+
<section className="container max-w-2xl mb-6">
48+
<Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
49+
<div>
50+
<Label>SVG</Label>
51+
<Textarea
52+
rows={6}
53+
placeholder="Paste SVG here"
54+
onChange={handleChange}
55+
className="mb-6"
56+
value={input}
57+
/>
58+
59+
<div className="flex justify-between items-center mb-2">
60+
{svgContent ? (
61+
<div dangerouslySetInnerHTML={{ __html: svgContent }} />
62+
) : (
63+
<Label className="mb-0">No SVG loaded yet</Label>
64+
)}
65+
</div>
66+
</div>
67+
</Card>
68+
</section>
69+
70+
<CallToActionGrid />
71+
72+
<section className="container max-w-2xl">
73+
<SvgViewerSEO />
74+
</section>
75+
</main>
76+
);
77+
}

0 commit comments

Comments
 (0)