Skip to content

Clean up and running on GitHub Pages (same branch) #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mountainash wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Clean up and running on GitHub Pages (same branch) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05425aa
Just so small mods to get the sample working again
mountainash Aug 15, 2021
c475f19
GHPages is looking for this file... not the index.html???
mountainash Aug 15, 2021
fd78031
Adding link to GutHub Pages
mountainash Aug 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
SVG-optimiser.js
================
# `SVG-optimiser.js`
> An online SVG optimiser using JavaScript and jQuery

An online SVG optimiser using Javascript and jQuery
Use it now: https://mountainash.github.io/SVG-optimiser.js/

##Using optimise-functions.js and SVG-elements.js
## Using `optimise-functions.js` and `SVG-elements.js`

###Create an SVG_Root object
### Create an `SVG_Root` object
The `SVG_Root` object is what parses the SVG and allows you to access the optimisation functions. You can pass it either a complete SVG or an SVG element (which can have child elements).

You can pass it a string with:
`var SVGObject = SVG_Root('<path d="M10 20 M 30 40"/>');`

Or a JQuery object with:
Or a jQuery object with:
`var SVGObject = SVG_Root($('#my-svg'));`

###Optimise the SVG
### Optimise the SVG
Optimisation is done with: `svg.optimise();`

There are many options which I will have to write about at some point.

###Write the SVG
### Write the SVG
You can get the SVG as a string with:
`SVGObject.write();`

Or as a DOM element with:
`SVGObject.createSVGObject();`

## Licence
- [MIT](./LICENSE)
49 changes: 39 additions & 10 deletions test.html → index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,57 @@
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>SVG optimisation</title>
<link rel='stylesheet' type='text/css' href='test.css'/>
<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="scripts/SVG-data.js"></script>
<script type="text/javascript" src="scripts/optimiseSVG.js"></script>
<script type="text/javascript" src="scripts/optimise-functions.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
</head>
<title>SVG Optimisation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="scripts/SVG-data.js"></script>
<script src="scripts/optimiseSVG.js"></script>
<script src="scripts/optimise-functions.js"></script>
<script src="scripts/interface.js"></script>
<style>
body {
font-family: sans-serif;
}

textarea {
margin-top: 1em;
width: 100%;
height: 200px;
}

#optimise-container > div {
display: inline-block;
background: #e8e8e8;
margin: 5px;
padding: 5px;
}

#options-container {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}

#output-container {
white-space: pre-wrap;
font-family: Fixed, 'Courier New', monospace;
font-size: 12px;
}
</style>
</head>
<body>
<h1>SVG optimiser</h1>

<section id="upload-section">
<h2>Upload</h2>
<div id="upload-container">
<div>
<!-- Missing from git
<button onclick="getExampleSVG('mad-scientist')">Example: Scientist</button>
<button onclick="getExampleSVG('FClef')">Example: Clef</button>
<button onclick="getExampleSVG('eleven_below')">Example: Room</button>
<button onclick="getExampleSVG('Awesome_tiger')">Example: Tiger</button>
<button onclick="getExampleSVG('Example')">Example: Another example</button>
-->
<button onclick="loadSVG('svg-input')">Upload</button>
</div>
<textarea id="input-svg" placeholder="Paste SVG code here, then click upload"></textarea>
Expand Down Expand Up @@ -53,7 +82,7 @@ <h3>Options</h3>

<section id="output-section">
<h2>Output</h2>
<div id="output-container"></div>
<textarea id="output-container"></textarea>
</section>
</body>
</html>
2 changes: 2 additions & 0 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# [index.html](./index.html)
- [Go here](./index.html)
12 changes: 5 additions & 7 deletions scripts/interface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,17 +126,15 @@ function loadSVG(id) {
optimiseSVG(svgObj);

// Update interface
$('#upload-container').hide("fast");
$('#upload-section').hide('fast');
addOptions(svgObj);
$('#output-section').show();
$('#optimise-section').show();
$('#output-section,#optimise-section').show();
}

$(document).ready(function() {
$(function() {
$('#upload-section > h2').click(function() {
$('#upload-container').toggle('fast');
});

$('#output-section').hide();
$('#optimise-section').hide();
});
$('#output-section,#optimise-section').hide();
});
24 changes: 0 additions & 24 deletions test.css
View file
Open in desktop

This file was deleted.