Clean up SVG files and update logos

- Removed unnecessary XML and DOCTYPE declarations from SVG files.
- Eliminated comments within SVG files for cleaner output.
- Trimmed leading and trailing whitespace from SVG content.
- Ensured all SVG files end with a newline character.
- Updated multiple logo SVG files including WireGuard, Wise, WOG, Yahoo, and others to conform to the new standards.
- Enhanced the update-data.js script to automate the cleanup process for SVG files.
This commit is contained in:
sHa
2025-06-19 16:54:55 +03:00
parent e86600b610
commit 1db0f1cbe9
528 changed files with 703 additions and 553 deletions

View File

@@ -10,7 +10,7 @@
<rect x="0px" y="369px" width="331px" height="331px" style="fill:#ffdc00;" />
<rect x="369px" y="0px" width="881px" height="331px" style="fill:#ffdc00;" />
<!--inner shield-->
<path style="fill:none; stroke:white; stroke-width:50px; stroke-linejoin:mitter;" d="m 350,170 C 336,158 322,163 306,171 288,181 264,181 235,175 232,205 221,232 201,256 238,283 249,317 206,361 L 213,371
C 217,445 236,475 274,486 279,503 299,517 336,526 L350,537
L 364,526 C 401,517 421,503 426,486 464,475 483,435, 487,371
@@ -22,11 +22,11 @@
L 494,361 C 451,317 462,283 498,256 479,232 468,205 465,175 436,181 412,181 394,171 378,163 364,158 350,170 z" />
<!--castle-->
<!--castle wall-->
<rect x="260px" y="276px" width="180px" height="165px" style="fill:white ;stroke:black; stroke-width:1px;" />
<!--bricks - horizontal lines-->
<line x1="260px" y1="291px" x2="440px" y2="291px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="260px" y1="306px" x2="440px" y2="306px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="260px" y1="321px" x2="440px" y2="321px" stroke="black" stroke-width="1" stroke-linecap="butt" />
@@ -38,8 +38,8 @@
<line x1="260px" y1="411px" x2="440px" y2="411px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="260px" y1="426px" x2="440px" y2="426px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<!--bricks - vertical lines-->
<!--whole bricks-->
<line x1="290px" y1="276px" x2="290px" y2="291px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="320px" y1="276px" x2="320px" y2="291px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="350px" y1="276px" x2="350px" y2="291px" stroke="black" stroke-width="1" stroke-linecap="butt" />
@@ -66,7 +66,7 @@
<line x1="290px" y1="426px" x2="290px" y2="441px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="410px" y1="426px" x2="410px" y2="441px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<!--parted bricks-->
<line x1="275px" y1="291px" x2="275px" y2="306px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="305px" y1="291px" x2="305px" y2="306px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="335px" y1="291px" x2="335px" y2="306px" stroke="black" stroke-width="1" stroke-linecap="butt" />
@@ -96,30 +96,30 @@
<line x1="395px" y1="411px" x2="395px" y2="426px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<line x1="425px" y1="411px" x2="425px" y2="426px" stroke="black" stroke-width="1" stroke-linecap="butt" />
<!--stairs-->
<rect x="257px" y="441px" width="186px" height="9px" style="fill:white ;stroke:black; stroke-width:1px;" />
<rect x="249px" y="450px" width="202px" height="9px" style="fill:white ;stroke:black; stroke-width:1px;" />
<!--door-->
<!--door hole-->
<path style="fill:white; stroke:black; stroke-width:1px;"
d="m 320,378 C 340,334 360,334 380,378 V441 H320 V378 Z" />
<path style="fill:#09e;" d="m 325,378 C 340,339 360,339 375,378 V441 H325 V378 Z" />
<!--doors-->
<path style="fill:#ffdc00; stroke:black; stroke-width:1px;"
d="m 326,372 C 324,363 318,357 310,353 V441 H326 V372 z" />
<path style="fill:#ffdc00; stroke:black; stroke-width:1px;"
d="m 374,372 C 376,363 382,357 390,353 V441 H374 V372 z" />
<!--door top-->
<polygon points="345,352 342,336 350,331 358,336 355,352" style="fill:white; stroke:black; stroke-width:1" />
<!--roof-->
<polygon points="260,276 254,270 446,270 443,276" style="fill:white; stroke:black; stroke-width:1" />
<!--towers-->
<!--central tower-->
<path style="fill:white; stroke:black; stroke-width:1px;"
d="m 370,270 H330 V230 L323,223 V205 H335 V212 H344 V205 H356 V212 H366 V205 H377 V223 L370,230 V270 z" />
<line x1="330px" y1="233px" x2="370px" y2="233px" stroke="black" stroke-width="1" stroke-linecap="butt" />
@@ -130,7 +130,7 @@
<rect x="356px" y="238px" width="8px" height="13px" style="fill:black;" />
<rect x="346px" y="257px" width="8px" height="13px" style="fill:black;" />
<!--left tower-->
<path style="fill:white; stroke:black; stroke-width:1px;"
d="m 303,270 H263 V235 L256,228 V212 H268 V221 H277 V212 H289 V221 H298 V212 H310 V228 L303,235 V270 z" />
<line x1="263px" y1="238px" x2="303px" y2="238px" stroke="black" stroke-width="1" stroke-linecap="butt" />
@@ -141,7 +141,7 @@
<rect x="289px" y="243px" width="8px" height="11px" style="fill:black;" />
<rect x="279px" y="259px" width="8px" height="11px" style="fill:black;" />
<!--right tower-->
<path style="fill:white; stroke:black; stroke-width:1px;"
d="m 437,270 H397 V235 L390,228 V212 H402 V221 H411 V212 H423 V221 H432 V212 H444 V228 L437,235 V270 z" />
<line x1="397px" y1="238px" x2="437px" y2="238px" stroke="black" stroke-width="1" stroke-linecap="butt" />

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -1,4 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0,0 240,144">
<desc>Flag of Tenessee, United States</desc>
<rect width="222" height="144" fill="#c00"/>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1002 B

View File

@@ -1,4 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1080 720">
<rect width="1080" height="720" fill="#fff"/>
<rect y="360" width="1080" height="360" fill="#bf0a30"/>

Before

Width:  |  Height:  |  Size: 755 B

After

Width:  |  Height:  |  Size: 715 B

View File

@@ -1,6 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="shape-rendering: geometricprecision; text-rendering: geometricprecision; fill-rule: evenodd; clip-rule: evenodd;" viewBox="0 0 3000 2100">
<defs>
<style type="text/css">

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 68 KiB

View File

@@ -1,4 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 408 225">
<g fill="currentColor">
<path

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@@ -1,5 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Pixelmator Pro 3.6.17 -->
<svg width="100%" height="100%" viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="Path" fill="#2c6dff" stroke="none" d="M 88 215 L 166 215 L 166 166 L 326 166 L 326 326 L 287 326 L 287 404 L 404 404 L 404 88 L 88 88 Z"/>

Before

Width:  |  Height:  |  Size: 899 B

After

Width:  |  Height:  |  Size: 815 B

View File

@@ -1,6 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@@ -1,6 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 210 50">
<defs>

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

144
scripts/svg-cleanup.js Normal file
View File

@@ -0,0 +1,144 @@
#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
// Use collections from src/collections.js
const { collections } = require('../src/collections.js');
// Accept collection as a CLI arg or env var
const collectionArg = process.argv.find(arg => arg.startsWith('--collection='));
const collectionName = collectionArg ? collectionArg.split('=')[1] : (process.env.COLLECTION || 'logos');
// SVG validation and fixing function
function validateAndFixSvg(svgPath) {
try {
let svgContent = fs.readFileSync(svgPath, 'utf8');
let modified = false;
// Clean up SVG content
const originalContent = svgContent;
// Remove XML declaration
svgContent = svgContent.replace(/<\?xml[^>]*\?>\s*/gi, '');
// Remove DOCTYPE declaration
svgContent = svgContent.replace(/<!DOCTYPE[^>]*>\s*/gi, '');
// Remove comments
svgContent = svgContent.replace(/<!--[\s\S]*?-->/g, '');
// Remove leading/trailing whitespace and ensure it starts with <svg
svgContent = svgContent.trim();
if (originalContent !== svgContent) {
modified = true;
console.log(`${path.basename(svgPath)}: Cleaned up SVG (removed XML/DOCTYPE/comments)`);
}
// Parse SVG tag attributes
const svgTagMatch = svgContent.match(/<svg[^>]*>/i);
if (!svgTagMatch) {
console.warn(`No SVG tag found in ${path.basename(svgPath)}`);
return;
}
const svgTag = svgTagMatch[0];
const viewBoxMatch = svgTag.match(/viewBox\s*=\s*["']([^"']+)["']/i);
const widthMatch = svgTag.match(/width\s*=\s*["']([^"']+)["']/i);
const heightMatch = svgTag.match(/height\s*=\s*["']([^"']+)["']/i);
const hasViewBox = !!viewBoxMatch;
const hasWidth = !!widthMatch;
const hasHeight = !!heightMatch;
const width = hasWidth ? widthMatch[1] : null;
const height = hasHeight ? heightMatch[1] : null;
if (!hasViewBox && !hasWidth && !hasHeight) {
console.warn(`${path.basename(svgPath)}: No viewBox, width, or height found - cannot determine dimensions`);
return;
}
let newSvgTag = svgTag;
if (!hasViewBox && hasWidth && hasHeight) {
// Add viewBox using width and height
const widthValue = parseFloat(width);
const heightValue = parseFloat(height);
if (!isNaN(widthValue) && !isNaN(heightValue)) {
const viewBoxValue = `0 0 ${widthValue} ${heightValue}`;
newSvgTag = newSvgTag.replace(/(<svg[^>]*?)>/i, `$1 viewBox="${viewBoxValue}">`);
modified = true;
console.log(`${path.basename(svgPath)}: Added viewBox="${viewBoxValue}"`);
}
}
// Update width and height to 100% if they exist
if (hasWidth && width !== '100%') {
newSvgTag = newSvgTag.replace(/width\s*=\s*["'][^"']+["']/i, 'width="100%"');
modified = true;
console.log(`${path.basename(svgPath)}: Updated width to 100%`);
}
if (hasHeight && height !== '100%') {
newSvgTag = newSvgTag.replace(/height\s*=\s*["'][^"']+["']/i, 'height="100%"');
modified = true;
console.log(`${path.basename(svgPath)}: Updated height to 100%`);
}
if (modified) {
svgContent = svgContent.replace(svgTag, newSvgTag);
fs.writeFileSync(svgPath, svgContent, 'utf8');
console.log(`${path.basename(svgPath)}: SVG file updated`);
}
} catch (error) {
console.error(`Error processing SVG ${path.basename(svgPath)}:`, error.message);
}
}
// Process SVG files for cleanup and validation
function processSvgFiles(collectionName) {
const collection = collections.find(c => c.name === collectionName);
if (!collection) {
console.error(`Collection "${collectionName}" not found`);
return;
}
const imagesDir = path.join(__dirname, '..', 'public', collection.baseDir);
if (!fs.existsSync(imagesDir)) {
console.error(`Directory does not exist: ${imagesDir}`);
return;
}
console.log(`Processing SVG files in collection: ${collection.label}`);
const files = fs.readdirSync(imagesDir);
const svgFiles = files.filter(file => /\.svg$/i.test(file));
console.log(`Found ${svgFiles.length} SVG files`);
for (const file of svgFiles) {
const svgPath = path.join(imagesDir, file);
validateAndFixSvg(svgPath);
}
console.log(`Completed processing SVG files for ${collection.label}`);
}
// Main function
function main() {
if (collectionName === 'all') {
// Process all collections
for (const col of collections) {
processSvgFiles(col.name);
}
} else {
// Process single collection
processSvgFiles(collectionName);
}
}
// Run the script
main();

View File

@@ -190,6 +190,26 @@ function validateAndFixSvg(svgPath) {
let svgContent = fs.readFileSync(svgPath, 'utf8');
let modified = false;
// Clean up SVG content
const originalContent = svgContent;
// Remove XML declaration
svgContent = svgContent.replace(/<\?xml[^>]*\?>\s*/gi, '');
// Remove DOCTYPE declaration
svgContent = svgContent.replace(/<!DOCTYPE[^>]*>\s*/gi, '');
// Remove comments
svgContent = svgContent.replace(/<!--[\s\S]*?-->/g, '');
// Remove leading/trailing whitespace and ensure it starts with <svg
svgContent = svgContent.trim();
if (originalContent !== svgContent) {
modified = true;
console.log(`${path.basename(svgPath)}: Cleaned up SVG (removed XML/DOCTYPE/comments)`);
}
// Parse SVG tag attributes
const svgTagMatch = svgContent.match(/<svg[^>]*>/i);
if (!svgTagMatch) {