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.
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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
@@ -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();
|
||||
@@ -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) {
|
||||
|
||||