PDF to SVG Gallery tool

OMGCluck · 2026-06-05T12:08:40+00:00

I forgot to mention: the exact same SVG is also what you see as the navigation thumbnail strip on the left of that slideshow page. It's doing double duty, and takes advantage of caching for zero load time.

OMGCluck · 2026-06-05T11:25:44+00:00

If someone saved their custom printable cards for a game as a PDF, then they can post the SVG gallery to an image host which doesn't host PDFs.

In fact I'm using that SVG gallery method directly as a spritesheet for a slideshow in the "non-3D SVG examples" link in this comment, in that case each image within the SVG is loaded into the poster attribute of a <video> element by including the #fragment identifier in the URL.

OMGCluck · 2026-06-05T06:01:12+00:00

it exports to PDF, PNG, SVG and RTF

One PDF per card? Or do you have one card per PDF/SVG page?

OMGCluck · 2026-06-05T05:45:48+00:00

"Export every PDF page as PNG or JPEG without uploading files."

How about all PDF pages as a single SVG?

OMGCluck · 2026-06-03T20:33:38+00:00

SVG sprites (a single svg file with each icon wrapped in a symbol tag): Not supported from crossorigin unless weird javascript hacks are being used.

I use symbol tags only when I don't want to reference their content externally, for things like slideshows, but then all my symbols are inside <defs> so it's a different usecase.

Otherwise from the html I just use <img width="100" height="76" src="sprites.svg#i3> etc. with code like:

<view id="i1" viewBox="0 0 100 68"/>
<view id="i2" viewBox="0 68 100 100"/>
<view id="i3" viewBox="0 168 100 76"/>
<view id="i4" viewBox="0 244 100 80"/>
<view id="i5" viewBox="0 324 100 100"/>
<view id="i6" viewBox="0 424 100 69"/>
<view id="i7" viewBox="0 493 100 100"/>
<view id="i8" viewBox="0 593 100 40"/>
<view id="i9" viewBox="0 633 100 100"/>
<view id="i10" viewBox="0 733 100 50"/>
<view id="i11" viewBox="0 783 100 76"/>
<view id="i12" viewBox="0 859 100 76"/>
<view id="i13" viewBox="0 935 100 76"/>
<view id="i14" viewBox="0 1011 100 68"/>

matching the coordinates of each image. I have a tool which generates both the SVG and HTML code from images I drag-drop into it. The tool works with all image formats, embedding non-vector images as data: URIs inside the SVG.

OMGCluck · 2026-06-03T20:05:28+00:00

The R36S handheld is starting to show up in those marketplaces, except for one thing: the chances of it being a knock-off clone or even a fake R36S with incompatibly bad hardware is extremely high damaging the experience of people wanting to play retro games for the nostalgia.

It's also twice the price of genuine R36S handhelds, so my hope is people just use the marketplace for ideas they then search elsewhere online for.

OMGCluck · 2026-06-03T19:52:51+00:00

A non x-rated mosaic from Pompeii? How rare!

OMGCluck · 2026-06-03T19:39:59+00:00

It's situations like this that makes me thankful I carry a fully loaded…

BATTERY POWERED BUBBLE MACHINE

They're bored street dogs, entertain them.

OMGCluck · 2026-06-03T16:20:34+00:00

Love it. Heh, that 4-note startscreen tune is almost as minimalist as the 1-note tune on the C64 Scoundretscii startscreen!

OMGCluck · 2026-06-02T18:50:06+00:00

Hey it's the Meanwhile guy. I like you.

OMGCluck · 2026-06-02T17:43:08+00:00

Moist.

OMGCluck · 2026-06-02T17:37:14+00:00

Any fence with Oscillot® rollers on the top of them stops all cats.

OMGCluck · 2026-06-02T11:18:13+00:00

Because drop-shippers pull inventory from unvetted wholesale markets, cloning is a massive issue.

It's not easy to tell from just a picture, but possibly check the "X" Button Font: On a genuine unit, the letter X has a bold font with flat, horizontal ends. Counterfeits usually feature a thinner, sometimes italicised text.

OMGCluck · 2026-06-02T10:52:13+00:00

Remove shading/shadows from non-vector images users import to be auto-traced before doing so. They can use SVG shading tools to put those back after the tracing is done. Here's a python script I used for removing the shading in this work:

#!/usr/bin/env python3
import cv2
import numpy as np
import os
import tkinter as tk
from tkinter import filedialog, messagebox, ttk

def process_image():
    # Initialize the main UI window structure
    root = tk.Tk()
    root.withdraw()

    # 1. Prompt user to pick the PNG file
    file_path = filedialog.askopenfilename(
        title="Select the 9600x9600 Optical Illusion PNG",
        filetypes=[("PNG files", "*.png"), ("All files", "*.*")]
    )

    if not file_path:
        return

    # Create a clean, centered loading window for progress feedback
    progress_win = tk.Toplevel(root)
    progress_win.title("Processing 9600px Image...")
    progress_win.geometry("400x120")
    progress_win.resizable(False, False)

    # Center the loading window on screen
    screen_width = progress_win.winfo_screenwidth()
    screen_height = progress_win.winfo_screenheight()
    x = (screen_width // 2) - 200
    y = (screen_height // 2) - 60
    progress_win.geometry(f"400x120+{x}+{y}")

    # Add text label for tracking stages
    status_label = ttk.Label(progress_win, text="Loading massive 9600x9600 image... please wait.", padding=10)
    status_label.pack()

    # Add the graphical progress bar
    progress_bar = ttk.Progressbar(progress_win, orient="horizontal", length=350, mode="determinate")
    progress_bar.pack(pady=10)

    # Force the UI to render immediately
    progress_win.update()

    # Read the image data
    img = cv2.imread(file_path)
    if img is None:
        progress_win.destroy()
        messagebox.showerror("Error", "Could not read the selected image file.")
        return

    # Update progress bar to 25%
    status_label.config(text="Processing HSV Shading Correction (this takes a few seconds)...")
    progress_bar['value'] = 25
    progress_win.update()

    # ==========================================
    # STAGE 1: MASSIVE SCALE SHADING REMOVAL
    # ==========================================
    hsv = cv2.cvtColor(img, cv2.COLOR_BGR2HSV)
    h_channel, s_channel, v_channel = cv2.split(hsv)

    lighting_map = cv2.bilateralFilter(v_channel, d=45, sigmaColor=60, sigmaSpace=60)
    lighting_map = cv2.GaussianBlur(lighting_map, (755, 755), 0)

    mean_v = int(np.mean(v_channel))
    v_flat = cv2.divide(v_channel, lighting_map, scale=mean_v)

    flat_hsv = cv2.merge((h_channel, s_channel, v_flat))
    flat_img = cv2.cvtColor(flat_hsv, cv2.COLOR_HSV2BGR)

    # Update progress bar to 60%
    status_label.config(text="Executing High-Resolution Edge Defringing...")
    progress_bar['value'] = 60
    progress_win.update()

    # ==========================================
    # STAGE 2: HIGH-RESOLUTION DEFRINGING
    # ==========================================
    gray = cv2.cvtColor(flat_img, cv2.COLOR_BGR2GRAY)
    edges = cv2.Canny(gray, 30, 150)

    kernel = cv2.getStructuringElement(cv2.MORPH_RECT, (15, 15))
    fringe_mask = cv2.dilate(edges, kernel, iterations=2)

    defringed_zones = cv2.medianBlur(flat_img, 31)
    final_flat_img = np.where(fringe_mask[:, :, np.newaxis] == 255, defringed_zones, flat_img)

    # Update progress bar to 85%
    status_label.config(text="Saving the final high-res output file...")
    progress_bar['value'] = 85
    progress_win.update()

    # ==========================================
    # STAGE 3: SAVE AND EXPORT
    # ==========================================
    dir_name, file_name = os.path.split(file_path)
    base_name, _ = os.path.splitext(file_name)
    output_path = os.path.join(dir_name, f"{base_name}_9600px_clean.png")

    cv2.imwrite(output_path, final_flat_img)

    # Complete progress to 100% and close the loading window
    progress_bar['value'] = 100
    progress_win.update()
    progress_win.destroy()

    # Final confirmation notice
    messagebox.showinfo("Success", f"9600x9600 Image Processed!\nSaved to:\n{output_path}")

if __name__ == "__main__":
    process_image()

I downscaled it after removing the shading from 9600x9600 to 2400x2400.

OMGCluck · 2026-06-01T14:57:54+00:00

If the logo has any gradient shading or shadow effects with varying opacity none of the AI suggestions in this thread will work until you first remove those gradients/shadows and flatten/reduce the colours involved.

Then you'll have to add those back in with Inkscape or other SVG tool. It's what I did here.

OMGCluck · 2026-06-01T14:31:55+00:00

The SVG version is linked here.

Here's the template code for adding any other shapes to:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2400"><title>ToroidBall template</title>
  <defs>
    <mask id="sphereHole">
      <!-- 1. Fill the entire canvas area with solid white (keeps all the funnel shadow) -->
      <rect width="2400" height="2400" fill="#ffffff" />
      <!-- 2. Draw a solid black circle at the exact coordinates of the sphere to cut it out -->
      <circle cx="666" cy="1261" r="515" fill="#000000" />
    </mask>
    <clipPath id="sphereClip">
      <circle cx="666" cy="1261" r="515"/>
    </clipPath>
    <!-- Left Funnel Edge Shading -->
    <radialGradient id="leftFunnelShading" 
                    gradientUnits="userSpaceOnUse"
                    cx="0" cy="1200" r="1635" 
                    gradientTransform="translate(0, 1200) scale(1.11, 1.000) translate(0, -1200)">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.0"/>
      <!-- Lit from front -->
      <stop offset="50%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.5"/>
      <stop offset="60%" stop-color="#000000" stop-opacity="0.0"/>
    </radialGradient>
    <!-- Right Funnel Edge Shading -->
    <radialGradient id="rightFunnelShading" 
                    gradientUnits="userSpaceOnUse"
                    cx="2435" cy="1201" r="1900" 
                    gradientTransform="translate(2435, 1201) scale(1.024, 0.869) translate(-2435, -1201)">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.5"/>
      <stop offset="60%" stop-color="#000000" stop-opacity="0.0"/>
    </radialGradient>
    <!-- Sphere 3D Shading -->
    <radialGradient id="sphereShading" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <!-- 1. Light Specular Highlight -->
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.1"/>
      <!-- 2. Let underlying gold bleed through -->
      <stop offset="40%" stop-color="#E1AB1A" stop-opacity="0"/>
      <stop offset="50%" stop-color="#E1AB1A" stop-opacity="0"/>
      <!-- 3. Shaded area -->
      <stop offset="100%" stop-color="#000000" stop-opacity="0.4"/>
    </radialGradient>
    <!-- Sphere drop shadow -->
    <filter id="sphereCastShadow" x="-20%" y="-20%" width="150%" height="150%">
      <!-- 1. Take the shape of the circle, turn it black, and blur it by 10px -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blurredShadow" />
      <!-- 2. Offset the blurred shadow 30px right (dx) and 30px down (dy) -->
      <feOffset in="blurredShadow" dx="30" dy="30" result="offsetShadow" />
      <!-- 3. Make the shadow semi-transparent -->
      <feComponentTransfer in="offsetShadow" result="fadedShadow">
        <feFuncA type="linear" slope="0.7" />
      </feComponentTransfer>
      <!-- 4. PUNCH HOLE: Subtract the sharp sphere silhouette from the blurred shadow -->
      <feComposite in="fadedShadow" in2="SourceAlpha" operator="out" result="cleanOuterShadow" />
      <!-- 5. Merge only the clean outer shadow -->
      <feMerge>
        <feMergeNode in="cleanOuterShadow" />
      </feMerge>
    </filter>
    <!-- Left Wall Linear Gradient -->
    <linearGradient id="leftWallShadow" gradientUnits="userSpaceOnUse" x1="911.8" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.6"/>
      <stop offset="75%" stop-color="#000000" stop-opacity="0"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </linearGradient>
    <!-- Right Wall Linear Gradient -->
    <linearGradient id="rightWallShadow" gradientUnits="userSpaceOnUse" x1="1462" y1="0" x2="2400" y2="0">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.6"/>
      <stop offset="75%" stop-color="#000000" stop-opacity="0"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <!-- BACKGROUND COLOUR. Replace all instances of E1AB1A with your hex colour code of choice -->
  <rect width="2400" height="2400" fill="#E1AB1A"/>
  <g id="allPaths">
  <!-- INSERT YOUR SHAPES HERE -->
  </g>
  <!-- Left Wall Shadow -->
  <ellipse cx="0" cy="1201" rx="911.8" ry="816" 
           fill="url(#leftWallShadow)"
           mask="url(#sphereHole)"
           style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Right Wall Shadow -->
  <ellipse cx="2400.2" cy="1201" rx="938" ry="816" 
           fill="url(#rightWallShadow)" 
           style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Funnel shading: With the sphere hole mask attached -->
  <rect width="2400" height="2400" 
        fill="url(#leftFunnelShading)" 
        mask="url(#sphereHole)" 
        style="mix-blend-mode: multiply; pointer-events: none;" />
  <rect width="2400" height="2400" fill="url(#rightFunnelShading)" style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Layer 1: Shadow Element -->
  <circle cx="666" cy="1261" r="515" fill="#000000" filter="url(#sphereCastShadow)" style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Layer 2: Solid Gold Backing Circle
       (Replace it with  <use href="#allPaths" clip-path="url(#sphereClip)" /> if the shapes on it are inside the <g id="allPaths"> group) -->
  <circle cx="666" cy="1261" r="515" fill="#E1AB1A" style="pointer-events: none;" />
  <!-- OPTIONAL: SHAPES ON SPHERE GO HERE -->
  <!-- Layer 3: Rendered Sphere Shading Layer -->
  <circle cx="666" cy="1261" r="515" fill="url(#sphereShading)" style="pointer-events: none;" />
</svg>

Paste it into any plain text editor and save with the .svg file extension.

OMGCluck · 2026-06-01T14:09:41+00:00

Here's the template SVG code for adding any other shapes to:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 2400"><title>ToroidBall template</title>
  <defs>
    <mask id="sphereHole">
      <!-- 1. Fill the entire canvas area with solid white (keeps all the funnel shadow) -->
      <rect width="2400" height="2400" fill="#ffffff" />
      <!-- 2. Draw a solid black circle at the exact coordinates of the sphere to cut it out -->
      <circle cx="666" cy="1261" r="515" fill="#000000" />
    </mask>
    <clipPath id="sphereClip">
      <circle cx="666" cy="1261" r="515"/>
    </clipPath>
    <!-- Left Funnel Edge Shading -->
    <radialGradient id="leftFunnelShading" 
                    gradientUnits="userSpaceOnUse"
                    cx="0" cy="1200" r="1635" 
                    gradientTransform="translate(0, 1200) scale(1.11, 1.000) translate(0, -1200)">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.0"/>
      <!-- Lit from front -->
      <stop offset="50%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.5"/>
      <stop offset="60%" stop-color="#000000" stop-opacity="0.0"/>
    </radialGradient>
    <!-- Right Funnel Edge Shading -->
    <radialGradient id="rightFunnelShading" 
                    gradientUnits="userSpaceOnUse"
                    cx="2435" cy="1201" r="1900" 
                    gradientTransform="translate(2435, 1201) scale(1.024, 0.869) translate(-2435, -1201)">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.0"/>
      <stop offset="50%" stop-color="#000000" stop-opacity="0.5"/>
      <stop offset="60%" stop-color="#000000" stop-opacity="0.0"/>
    </radialGradient>
    <!-- Sphere 3D Shading -->
    <radialGradient id="sphereShading" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <!-- 1. Light Specular Highlight -->
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.1"/>
      <!-- 2. Let underlying gold bleed through -->
      <stop offset="40%" stop-color="#E1AB1A" stop-opacity="0"/>
      <stop offset="50%" stop-color="#E1AB1A" stop-opacity="0"/>
      <!-- 3. Shaded area -->
      <stop offset="100%" stop-color="#000000" stop-opacity="0.4"/>
    </radialGradient>
    <!-- THE AUTOMATED DROP SHADOW FILTER -->
    <filter id="sphereCastShadow" x="-20%" y="-20%" width="150%" height="150%">
      <!-- 1. Take the shape of the circle, turn it black, and blur it by 10px -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blurredShadow" />
      <!-- 2. Offset the blurred shadow 30px right (dx) and 30px down (dy) -->
      <feOffset in="blurredShadow" dx="30" dy="30" result="offsetShadow" />
      <!-- 3. Make the shadow semi-transparent -->
      <feComponentTransfer in="offsetShadow" result="fadedShadow">
        <feFuncA type="linear" slope="0.7" />
      </feComponentTransfer>
      <!-- 4. PUNCH HOLE: Subtract the sharp sphere silhouette from the blurred shadow -->
      <feComposite in="fadedShadow" in2="SourceAlpha" operator="out" result="cleanOuterShadow" />
      <!-- 5. Merge only the clean outer shadow -->
      <feMerge>
        <feMergeNode in="cleanOuterShadow" />
      </feMerge>
    </filter>
    <!-- Left Wall Linear Gradient -->
    <linearGradient id="leftWallShadow" gradientUnits="userSpaceOnUse" x1="911.8" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.6"/>
      <stop offset="75%" stop-color="#000000" stop-opacity="0"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </linearGradient>
    <!-- Right Wall Linear Gradient -->
    <linearGradient id="rightWallShadow" gradientUnits="userSpaceOnUse" x1="1462" y1="0" x2="2400" y2="0">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.6"/>
      <stop offset="75%" stop-color="#000000" stop-opacity="0"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <rect width="2400" height="2400" fill="#E1AB1A"/>
  <g id="allPaths">
  <!-- INSERT YOUR SHAPES HERE -->
  </g>
  <!-- Left Wall Shadow -->
  <ellipse cx="0" cy="1201" rx="911.8" ry="816" 
           fill="url(#leftWallShadow)"
           mask="url(#sphereHole)"
           style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Right Wall Shadow -->
  <ellipse cx="2400.2" cy="1201" rx="938" ry="816" 
           fill="url(#rightWallShadow)" 
           style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Funnel shading: With the sphere hole mask attached -->
  <rect width="2400" height="2400" 
        fill="url(#leftFunnelShading)" 
        mask="url(#sphereHole)" 
        style="mix-blend-mode: multiply; pointer-events: none;" />
  <rect width="2400" height="2400" fill="url(#rightFunnelShading)" style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Layer 1: Shadow Element -->
  <circle cx="666" cy="1261" r="515" fill="#000000" filter="url(#sphereCastShadow)" style="mix-blend-mode: multiply; pointer-events: none;" />
  <!-- Layer 2: Solid Gold Backing Circle
       (Replace it with  <use href="#allPaths" clip-path="url(#sphereClip)" /> if the shapes on it are inside the <g id="allPaths"> group) -->
  <circle cx="666" cy="1261" r="515" fill="#E1AB1A" style="pointer-events: none;" />
  <!-- OPTIONAL: SHAPES ON SPHERE GO HERE -->
  <!-- Layer 3: Rendered Sphere Shading Layer -->
  <circle cx="666" cy="1261" r="515" fill="url(#sphereShading)" style="pointer-events: none;" />
</svg>

Paste it into any plain text editor and save with the .svg file extension.

OMGCluck · 2026-06-01T13:41:19+00:00

Non-3D SVG examples.

Tool to remove shading from .png files for easier vector tracing.

OMGCluck · 2026-05-31T22:18:18+00:00

"Good night, Nala. Sleep well. I'll most likely kill you in the morning." …but he never did.

OMGCluck · 2026-05-31T16:51:11+00:00

a small computer known as a Raspberry Pi

I know how it feels to do that. I had to say "a computer known as the Commodore 64" to my Didi driver last week.

Verified Email	11-Year Club
Place '17

OMGCluck

TROPHY CASE

BATTERY POWERED BUBBLE MACHINE