feat: new "card fan" app icon — web favicon/PWA + Android adaptive
CI/CD / CI - API (dotnet build + engine sim) (push) Successful in 41s
CI/CD / CI - Web (tsc + next build) (push) Successful in 1m15s
CI/CD / Deploy - local stack (db + server + web) (push) Successful in 1m6s

- Master SVGs + generator in scripts/icon/ (icon.svg full design, icon-foreground.svg
  cards-only for the Android adaptive layer, gen-icons.mjs via sharp).
- Web/PWA: regenerated favicon.ico (16/32/48), src/app/apple-icon.png, public/icon.svg,
  icon-192/512, icon-maskable-512; manifest now lists png + maskable icons.
- Android (Capacitor): ic_launcher / ic_launcher_round / ic_launcher_foreground for all
  densities + ic_launcher-playstore 512; adaptive background switched from flat white
  to a navy radial-gradient drawable (matches the icon), foreground = the gold card fan.

Design: navy field, gold rounded frame, three fanned cards with a gold spade —
on-brand with the in-app "Persian luxury" look.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-15 04:30:34 +03:30
parent bc695bc8e9
commit 97d3a02a3c
30 changed files with 231 additions and 185 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

@@ -1,170 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Adaptive-icon background: navy radial gradient with a subtle teal glow,
matching the web/app icon (scripts/icon/icon.svg). -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillColor="#26A69A"
android:pathData="M0,0h108v108h-108z" />
<path
android:fillColor="#00000000"
android:pathData="M9,0L9,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,0L19,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M29,0L29,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M39,0L39,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M49,0L49,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M59,0L59,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M69,0L69,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M79,0L79,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M89,0L89,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M99,0L99,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,9L108,9"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,19L108,19"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,29L108,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,39L108,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,49L108,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,59L108,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,69L108,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,79L108,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,89L108,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,99L108,99"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,29L89,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,39L89,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,49L89,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,59L89,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,69L89,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,79L89,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M29,19L29,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M39,19L39,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M49,19L49,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M59,19L59,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M69,19L69,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M79,19L79,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path android:pathData="M0,0h108v108h-108z">
<aapt:attr name="android:fillColor">
<gradient
android:type="radial"
android:centerX="54"
android:centerY="40"
android:gradientRadius="82"
android:startColor="#16284F"
android:centerColor="#0A142E"
android:endColor="#060C1F" />
</aapt:attr>
</path>
<path android:pathData="M54,42m-40,0a40,40 0,1 1,80 0a40,40 0,1 1,-80 0z">
<aapt:attr name="android:fillColor">
<gradient
android:type="radial"
android:centerX="54"
android:centerY="42"
android:gradientRadius="46"
android:startColor="#1A2DD4BF"
android:endColor="#002DD4BF" />
</aapt:attr>
</path>
</vector>
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

+37 -14
View File
@@ -1,22 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg width="1024" height="1024" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#0e1c3f"/>
<radialGradient id="bg" cx="50%" cy="36%" r="78%">
<stop offset="0" stop-color="#16284f"/>
<stop offset="0.62" stop-color="#0a142e"/>
<stop offset="1" stop-color="#060c1f"/>
</linearGradient>
</radialGradient>
<linearGradient id="gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f1da8a"/>
<stop offset="0.55" stop-color="#d4af37"/>
<stop offset="0" stop-color="#f6e4a0"/>
<stop offset="0.5" stop-color="#d4af37"/>
<stop offset="1" stop-color="#b8860b"/>
</linearGradient>
<linearGradient id="face" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fffdf7"/>
<stop offset="1" stop-color="#f1e6cd"/>
</linearGradient>
<linearGradient id="navy" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1d356a"/>
<stop offset="1" stop-color="#0a142e"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="112" fill="url(#bg)"/>
<g fill="none" stroke="#d4af37" stroke-opacity="0.18" stroke-width="3">
<path d="M256 48 L464 256 L256 464 L48 256 Z"/>
<path d="M256 120 L392 256 L256 392 L120 256 Z"/>
<rect width="512" height="512" fill="url(#bg)"/>
<circle cx="256" cy="196" r="185" fill="#2dd4bf" opacity="0.07"/>
<rect x="30" y="30" width="452" height="452" rx="104" fill="none" stroke="url(#gold)" stroke-width="6" opacity="0.6"/>
<g transform="rotate(-25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="rotate(25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="translate(0 -24)">
<rect x="181" y="178" width="150" height="212" rx="16" fill="url(#face)" stroke="url(#gold)" stroke-width="5"/>
<rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" stroke-width="2"/>
<g transform="translate(256 268) scale(1.45)">
<path d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z" fill="url(#gold)" stroke="#7a5a00" stroke-width="1.5"/>
</g>
</g>
<path d="M256 150 C300 150 330 182 330 224 C330 286 256 330 256 360 C256 330 182 286 182 224 C182 182 212 150 256 150 Z"
fill="url(#gold)"/>
<text x="256" y="438" text-anchor="middle" font-family="Vazirmatn, Tahoma, sans-serif"
font-size="62" font-weight="800" fill="url(#gold)">برگ وسط</text>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

+4 -6
View File
@@ -11,11 +11,9 @@
"background_color": "#060c1f",
"theme_color": "#060c1f",
"icons": [
{
"src": "/icon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" },
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
+79
View File
@@ -0,0 +1,79 @@
// Generates every app/website/Android icon asset from the two master SVGs:
// scripts/icon/icon.svg — full design (navy bg + gold frame + fanned cards)
// scripts/icon/icon-foreground.svg — cards only, transparent (Android adaptive foreground)
// Run: node scripts/icon/gen-icons.mjs
import sharp from "sharp";
import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
const here = path.dirname(fileURLToPath(import.meta.url));
const root = path.resolve(here, "..", "..");
const fullSvg = fs.readFileSync(path.join(here, "icon.svg"));
const fgSvg = fs.readFileSync(path.join(here, "icon-foreground.svg"));
const R = (p) => path.join(root, p);
const ensure = (p) => fs.mkdirSync(path.dirname(p), { recursive: true });
async function png(svg, size) {
return sharp(svg, { density: 384 }).resize(size, size, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).png().toBuffer();
}
async function write(svg, size, dest) {
ensure(R(dest));
fs.writeFileSync(R(dest), await png(svg, size));
console.log(" ", dest, `(${size})`);
}
// PNG-in-ICO container (16/32/48), accepted by all modern browsers.
function buildIco(entries) {
const header = Buffer.alloc(6);
header.writeUInt16LE(0, 0); header.writeUInt16LE(1, 2); header.writeUInt16LE(entries.length, 4);
const dir = Buffer.alloc(16 * entries.length);
let offset = 6 + 16 * entries.length;
entries.forEach((e, i) => {
const b = i * 16;
dir.writeUInt8(e.size >= 256 ? 0 : e.size, b);
dir.writeUInt8(e.size >= 256 ? 0 : e.size, b + 1);
dir.writeUInt16LE(1, b + 4); dir.writeUInt16LE(32, b + 6);
dir.writeUInt32LE(e.buf.length, b + 8); dir.writeUInt32LE(offset, b + 12);
offset += e.buf.length;
});
return Buffer.concat([header, dir, ...entries.map((e) => e.buf)]);
}
const ANDROID = [
["mipmap-mdpi", 48, 108],
["mipmap-hdpi", 72, 162],
["mipmap-xhdpi", 96, 216],
["mipmap-xxhdpi", 144, 324],
["mipmap-xxxhdpi", 192, 432],
];
async function run() {
console.log("Web / PWA:");
// public/icon.svg = the vector master (manifest references it)
fs.copyFileSync(path.join(here, "icon.svg"), R("public/icon.svg"));
console.log(" public/icon.svg (vector)");
await write(fullSvg, 192, "public/icon-192.png");
await write(fullSvg, 512, "public/icon-512.png");
await write(fullSvg, 512, "public/icon-maskable.png");
await write(fullSvg, 180, "public/apple-touch-icon.png");
await write(fullSvg, 180, "src/app/apple-icon.png");
// favicon.ico (16/32/48)
const ico = buildIco(await Promise.all([16, 32, 48].map(async (s) => ({ size: s, buf: await png(fullSvg, s) }))));
ensure(R("src/app/favicon.ico"));
fs.writeFileSync(R("src/app/favicon.ico"), ico);
console.log(" src/app/favicon.ico (16/32/48)");
console.log("Android (Capacitor):");
for (const [dir, launcher, fg] of ANDROID) {
await write(fullSvg, launcher, `android/app/src/main/res/${dir}/ic_launcher.png`);
await write(fullSvg, launcher, `android/app/src/main/res/${dir}/ic_launcher_round.png`);
await write(fgSvg, fg, `android/app/src/main/res/${dir}/ic_launcher_foreground.png`);
}
await write(fullSvg, 512, "android/app/src/main/ic_launcher-playstore.png");
console.log("Done.");
}
run().catch((e) => { console.error(e); process.exit(1); });
+38
View File
@@ -0,0 +1,38 @@
<svg width="1024" height="1024" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f6e4a0"/>
<stop offset="0.5" stop-color="#d4af37"/>
<stop offset="1" stop-color="#b8860b"/>
</linearGradient>
<linearGradient id="face" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fffdf7"/>
<stop offset="1" stop-color="#f1e6cd"/>
</linearGradient>
<linearGradient id="navy" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1d356a"/>
<stop offset="1" stop-color="#0a142e"/>
</linearGradient>
</defs>
<!-- the fanned cards, centered + scaled into the adaptive safe zone (~66%) -->
<g transform="translate(256 256) scale(0.82) translate(-256 -290)">
<g transform="rotate(-25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="rotate(25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="translate(0 -24)">
<rect x="181" y="178" width="150" height="212" rx="16" fill="url(#face)" stroke="url(#gold)" stroke-width="5"/>
<rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" stroke-width="2"/>
<g transform="translate(256 268) scale(1.45)">
<path d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z" fill="url(#gold)" stroke="#7a5a00" stroke-width="1.5"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

+45
View File
@@ -0,0 +1,45 @@
<svg width="1024" height="1024" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bg" cx="50%" cy="36%" r="78%">
<stop offset="0" stop-color="#16284f"/>
<stop offset="0.62" stop-color="#0a142e"/>
<stop offset="1" stop-color="#060c1f"/>
</radialGradient>
<linearGradient id="gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f6e4a0"/>
<stop offset="0.5" stop-color="#d4af37"/>
<stop offset="1" stop-color="#b8860b"/>
</linearGradient>
<linearGradient id="face" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fffdf7"/>
<stop offset="1" stop-color="#f1e6cd"/>
</linearGradient>
<linearGradient id="navy" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#1d356a"/>
<stop offset="1" stop-color="#0a142e"/>
</linearGradient>
</defs>
<rect width="512" height="512" fill="url(#bg)"/>
<circle cx="256" cy="196" r="185" fill="#2dd4bf" opacity="0.07"/>
<rect x="30" y="30" width="452" height="452" rx="104" fill="none" stroke="url(#gold)" stroke-width="6" opacity="0.6"/>
<g transform="rotate(-25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="rotate(25 256 396)">
<rect x="182" y="180" width="148" height="210" rx="16" fill="url(#navy)" stroke="url(#gold)" stroke-width="4"/>
<rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" stroke-width="2" opacity="0.45"/>
<path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75"/>
</g>
<g transform="translate(0 -24)">
<rect x="181" y="178" width="150" height="212" rx="16" fill="url(#face)" stroke="url(#gold)" stroke-width="5"/>
<rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" stroke-width="2"/>
<g transform="translate(256 268) scale(1.45)">
<path d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z" fill="url(#gold)" stroke="#7a5a00" stroke-width="1.5"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB