abusedmedia / jllustrator Goto Github PK

After included the library just add in your HTML document:

<div jllustrator="myArtwork.svg"></div>

to inject an SVG file into your HTML file alongside some fix and enhancements

To perform some operation after the async nature of the loading process, use the jQuery.ready function as usual:

$(document).ready(function(){
  console.log('my svg has been loaded')
  $('svg').on('click', function(){
    console.log('Click from SVG')
  })
})

jQuery 3.x.x

Just drop the following lines into the HEAD of the HTML file:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jllustrator.min.js"></script>

npm install jllustrator

<div jllustrator="ball.svg"></div>

In Adobe Illustrator masking a mask is quite straightforward. The problem is when you try to select it clip-mask for manipulate it. Illustrator gives it an internal name (it simply ignores the name you set) making very difficult to recall with jQuery. This method gives you a reference of the clip path (if any) of a given clipped object:

var mask = $('#myObjectMasked').getMask()

$().grid(3, 3).each(function(i, d){
    console.log(d)
})

• Don't start with a number in layer name
• Don't use _ in layer name
• Don't use | in layer name
• Don't use _ in layer name, they will mess up making difficult to recall
• You can use [SPACE] and it will be changed as _
• Layer name are global, so using same name on different layer will cause an automatic changes
• Text element contains already a name that is equal to the text content. It is a preview and not a regular name therefore change it using a different name (otherwise Illustrator won't change it)

Show more Options in SVG export panel

• Save as SVG 1.1
• Set Output fewer <tspan> elements to true
• Images Location: use Link
• Type: Convert to Outline (see below for alternatives)
• Fonts: None (Use System Fonts)
• CSS Properties: Presentation Attributes
• Preserve Illustrator Edit capabilities checked

• Use pixel as unit
• Use RGB color space
• The size of the artboard will become the viewport of the prototype

​

• You can use fonts installed on your computer but they will work only on your computer.
• Alternatively you can convert all text as outline in the SVG part only, a little bit heavier and text cannot be changed in runtime, best solution for portability.
• You can use GoogleFont, both on your local computer and on remote files as well, a bit tricky but feaseable.
• You can use FontSquirrel and the Font-face declaration

Name it as you wish appending at the end:

' j|center'
' j|right'

Space are important. Otherwise it's possible to performe the same manually with:

$('#mytextid').textAlign('center')

or

$('#mytextid').textAlign('right')

• Can be linked (best option but you need to relink them from within AI if you move the file somewhere)
• Can be embed but pollute the svg code, not a good solution, hard to read

Classes are very useful on group selection or with CSS style. You cannot assign class name to elements in Adobe Illustrator.

jllustrator comes with a neat function that convert special layer name notation into class name in the SVG.

A layer with the name

myObject .class1 .class2

will become:

<g id="myObject" class="class1 class2"></g>

Use with responsibility

• gradients
• transparency
• compound shapes
• masks

(emulate with external image if you can't live without)

• Mesh
• Effects
• Filters
• Patterns