jakegiltsoff/svgontheweb

Techniques you can use to prepare, implement, and work with SVGs on the web.

svgontheweb's Issues

Alternative implementation option: Inline SVG with <image>

Not an Issue, and didn't want to send as a Commit as it may not fit with the spirit because of the couple minor issues, but thought it was worth mentioning. Alexey Ten offers a cool implementation option (http://lynn.ru/examples/svg/en.html) which was more deeply discussed and tested by Chris Coyier (https://css-tricks.com/svg-fallbacks/). Aside from the iOS 3/4 and IE9-11 issues, seems solid to me.

Cheers,
Atg

Multilingual translation

hi jake
I really like this project.
I want to translate a Chinese version.
Could you add a Chinese version?
Thanks.

<object> cannot be used as link (normally)

At least in latest Chrome, cannot be ued as link (by wrapping it in an anchor element).
There may be workarounds: http://soqr.fr/testsvg/svg-link-with-object.php

A tip for the JS Manipulation code

I think it must be explained why to use window.onload=function(), not extended, just a mention why we need the object loaded. In this code the "object" will be useful only inside window.onload=function() so other functions outside this scope can't access the object. The solution for me was just declare variables outside window.onload=function() in this way other functions can use this object to manipulate the SVG.

Imprecision or error re: <object>?

Hi Jake. Thanks for a great resource. 👍

The page currently reads:

<object> is pretty much the best option to use if you want to be able to manipulate an SVG.

I'm not sure what you mean by that. The phrase "manipulate an SVG" suggests manipulating the SVG dom or styles from outside the SVG file itself (mostly from the host page, or related stylesheets and scripts). But in my testing there is no need in either Chrome or Firefox to style or access the SVG‘s elements.

This works for Inline SVGs, and for <svg><use xlink:href="external.svg#symbol-id"></svg>:

object, svg {
    fill: red;
    stroke: lime;
    stroke-width: 5px;
}

Additionnally for external SVG symbols, this would work in Firefox, but it's considered a bug:

svg path {
    fill: lime;
}

Returning to <object>, this doesn't work either:

document.querySelector('object.bb-logo-example svg'); // null
document.querySelector('object.bb-logo-example path'); // null

Did you mean that <object> is an interesting option because, unlike the <img> tag, it allows the SVG file to run scripts (embedded inside the file) and reference external scripts and stylesheets? (Note I'm not 100 percent sure of which browsers allow what.)
If yes, what would be the differences between using <object> for that, and using <iframe>?

svgontheweb.com is down

svgontheweb.com is currently down. If I accept the invalid SSL certificate, the browser will abort the page loading as it will become stuck in a redirect loop.

wget log

❯ wget --no-check-certificate https://svgontheweb.com
--2018-07-13 16:27:06--  https://svgontheweb.com/
Resolving svgontheweb.com (svgontheweb.com)... 205.186.179.200
Connecting to svgontheweb.com (svgontheweb.com)|205.186.179.200|:443... connected.
WARNING: no certificate subject alternative name matches
        requested host name 'svgontheweb.com'.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:06--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:06--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:06--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:07--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:08--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:09--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:09--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
--2018-07-13 16:27:09--  https://svgontheweb.com/
Reusing existing connection to svgontheweb.com:443.
HTTP request sent, awaiting response... 302 Found
Location: https://svgontheweb.com/ [following]
20 redirections exceeded.

French translation

Is there anyone working on a French translation? If not, this is something I can tackle.

Browser support

Is there no info about browser support? I saw one note about Safari but nothing that most animations do not work on IE (have not checked Edge). Could you add something about this? Thanks!

How about combining?

Hello,

Would be awesome if you could cover the best practices for svg combining. It looks like it is possible to combine multiples svg into one, and to query them this way:

• my-combined-svg#my-id

I'm wondering if this is possible to do everything this way like on a regular svg, and if there's any downside people might need to know if choosing such a method. Combining could also make it possible to compile like we're doing with js and css assets. Being able to declare many svg when developing, and compile to only one sounds cool :)

Spanish translation

Hi, we have it.