#svg

prplcdclnw@diasp.eu

BTW, back in the early aughts, I used a GIF image of my email address.

[gopher://hngopher.com/1/live/p1/](gopher://hngopher.com/1/live/p1/) is the Gopher portal to Hacker News

[gopher://hngopher.com/0/live/items/40340642/dump.txt](gopher://hngopher.com/0/live/items/40340642/dump.txt)

https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js/

protecting-your-email-address-via-svg-instead-of-js

Protecting your email address via SVG instead of JS

For a live demo of this accessible, no-javascript technique, see:

https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js/svg-email-protection.html


Email addresses published on webpages usually need to be protected
from email-harvesting spambots.

Conventionally, email protection techniques utilise a combination of
HTML, CSS and JS - though each approach is subject to its own pros
and cons.

In general, approaches involving JS tend to be more sophisticated
than alternatives based on HTML and / or CSS.

But the downside is that JS then becomes an unavoidable dependency of
that page.

There is always benefit in considering the school of thought which
advocates that while JS may enhance pages, ideally we should want all
the essential functionality on those pages to work even while
JavaScript is turned off.


The technique detailed on this page utilises an an approach entirely
different from conventional email protection techniques, based on CSS
, JS, CSS + JS etc.

Because this technique is based on SVG.

N.B. This technique - and any other email-protection technique
utilising front-end-technologies - won't protect your published email
address from being harvested by the most determined and sophisticated
spambots. But, as with many JS-based email-protection techniques, it
will protect you nevertheless from a great many unsophisticated
harvesters and keep your email successfully hidden from any simple or
amateurish scripts trawling the web, seeking to copy any unprotected
email addresses they find.


Three advantages of an SVG-based approach to protecting email
addresses

  1. Works with JavaScript turned off

The main advantage of this SVG-based approach to protecting emails,
is that it involves no JavaScript.

As such, even when a human visitor has their JavaScript turned off,
the email address displayed on the page remains usable, accessible
and protected, while remaining secure and hidden from spambots.

  1. Permits a standard mailto: link

Unlike other no-JavaScript-required approaches (e.g. obfuscating
email addresses by inserting non-visible HTML Comments or inserting
visible elements and subsequently hiding them via CSS), this
SVG-based approach allows for standard mailto: links. The twist is:
the mailto: link exists inside the external SVG document, not inside
the referring HTML document.

  1. Conceals content like an image; Copyable like text

A third advantage is that embedded SVGs are image-like but not
images.

As replaced elements embedded within a hypertext document, SVGs may
conceal an email address from spambots nearly as effectively as an
image might.

But, strictly, SVGs are graphics documents rather than actual images.

Consequently, unlike with an image, a human visitor may still copy
the email address by right-clicking on the element in the
embedded SVG.

This would not be possible with a conventional image.


Implementing the Code

In the example below there are two files.

The SVG graphics document is embedded in the HTML hypertext document
via:

<object data="svg-email-protection.svg" type="image/svg+xml" /></object>

Note that the same SVG graphics document may be embedded in hypertext
once - or multiple times.

HTML File
````
<!DOCTYPE html>



SVG Email Protection

.svg-email-protection {
width: 180px;
height: 24px;
vertical-align: middle;
}

This is my email:


SVG File

Email Us!

<![CDATA[

rect {
width: 200px;
height: 24px;
fill: rgb(255, 255, 255);
}

a:focus rect,
rect:hover {
rx: 4px;
ry: 4px;
fill: rgb(0, 0, 255);
}

text {
font-size: 16px;
fill: rgb(0, 0, 255);
pointer-events: none;
}

a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}

]]>

myemail@mydomain.tld

````

Accessibility

As ever, it's important to ensure that this setup remains as
accessible as possible.

On this basis, note the following in the SVG graphics document:

  • the entire SVG document is aria-labelledby the SVG document , indicating a call-to-action
  • the anchor element () inside the SVG has an aria-label which has the same call-to-action
  • the SVG is styled such that when the tab-focus falls on the anchor element (), the child-elements, and the , are both highlighted

To see a live demo of this accessible, no-javascript technique, go
to:

https://rouninmedia.github.io/protecting-your-email-address-via-svg-instead-of-js/svg-email-protection.html

#svg #protected-email #email-address #hack #html

california@diaspora.permutationsofchaos.com

#Veusz – a scientific plotting package

Veusz is a scientific plotting and graphing program with a graphical user interface, designed to produce publication-ready 2D and 3D plots. In addition it can be used as a module in #Python for plotting. Veusz is multiplatform, running on #Windows, #Linux/Unix and #macOS. It supports vector and bitmap output, including #PDF, #Postscript, #SVG and #EMF. Veusz is Free #Software.

github: https://veusz.github.io
download: https://veusz.github.io/download

3d

mandelbrot

#tool #utility #graphics #plotter #mathematics #floss #foss #openSource

pafzedog@diaspora-fr.org

Image

corkami/pics: Posters, drawings...

À propos de Ange Albertini

I draw infosec-related materials (posters, stickers), recreate some classic documents and logos as vector which means they're lightweight, and zoomable to any resolution without any glitch. I share them all on my repository under permissive licenses (CC-BY or CC 0), so you can modify or reprint them yourself, re-use them in your slide decks, articles or trainings, on t-shirts for you or your kids...

https://github.com/corkami/pics

#svg #pics #cc0 #cc-by #common #free #art

allaatkasik@diaspora-fr.org

Bonjour tout le monde, je suis #nouveauici. Mes centres d'intérêt sont #css, #formation et #svg.

Ben en fait, pas du tout... chui pas pas nouvelle mais j'ai pas pu me reconnecter avec mon compte que j'avais lâchement abandonné ;). Donc, j'en ai recrée un (le même) et me revoilà ! Mais cette fois-ci j'ai peut-être des choses à faire partager d'où mon retour... Bon, chui toujours aussi nulle en réseaux sociaux mais cela devrait changer ! Donc, Re Bonjour à toute la communauté diaspora !