Giter Site home page Giter Site logo

spadarshut / kilobyte-svg-challenge Goto Github PK

View Code? Open in Web Editor NEW

This project forked from johan/kilobyte-svg-challenge

0.0 2.0 0.0 181 KB

Your mission, should you choose to accept it: make your favourite logo in 1024 bytes or less.

Home Page: http://johan.github.com/kilobyte-svg-challenge/

kilobyte-svg-challenge's Introduction

Kilobyte SVG Challenge

Make an accurate SVG of a logo, in 1024 bytes or less!

Rationale

The purpose of the Kilobyte SVG Challenge is sixfold:

  • marketing SVG use on the web
  • teaching SVG, "view source" style
  • marketing and improving SVG tools
  • collecting great, fast, and tiny SVG logos
  • learning, and having lots of geeky fun doing it!

Rules

  • Viewed in a web browser, your SVG must scale to the window size and maintain its aspect ratio. How?

  • Quality trumps size โ€“ while 1k is a goal, don't sacrifice looks!

  • You are encouraged to improve on already submitted logos!

  • No raster data, data: urls or multi-file svgs.

  • One tag per line, indented one or two spaces.

  • Create a pull request:

    • Name it after your logo.
    • List original: <url> on the first line of your comment, linking a version of the logo on the web.

Best practices

  • Since one goal is teaching, think of your commits as a step by step guide:
  • When optimizing, make separate commits for different operations you do.
  • Write good commit messages about what you did, that others can learn from.
  • When using tools, you are encouraged to name them in your commit messages.
  • If it's a command-line tool, better still: paste your command line args further down in the message!

How?

  • To make an SVG scale, make sure your <svg> element has a viewBox attribute, and no width, height or preserveAspectRatio attributes (xMidYMid meet is already the default).

Tools

  • InkScape: a popular open source SVG editor
  • Your favourite text editor - Emacs, vim, Textmate, et cetera
  • Scour [launchpad]: a python module / script by Jeff Schiller to shrink SVG file sizes
  • SVG Cleaner: a similar perl script with a graphical UI wrapper
  • SVG-Cleaner [github]: a javascript npm port of (parts of) Scour
  • svgtidy: a ruby script by Sam Ruby
  • CleanSVG: a .NET windows tool by Microsoft
  • SVG Optimizer: a Nodejs-based tool by Kir Belevich

Legal

All logos, copyrights, trademarks and other legal rights to the images in this repository belong to their respective owners, not the people submitting vectorized versions thereof.

If you find your logo represented here and would rather have people use whatever inferior non-scalable, slow-loading, pixellated raster graphics version they find when talking about you on the web, just submit an issue mentioning "takedown" in its title, list the url to the logo in question, and it will of course be removed from here.

kilobyte-svg-challenge's People

Contributors

crcastle avatar johan avatar spadarshut avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.