SVG webcomic experimentation

image data/images/lab/2015-02-11_SVG-webcomic-test.jpg
It was a first technical experiment post. Let's test SVG file format as an image. Outdated post now, thanks for all participations!

This post was a technical experiment about online SVG , not a real webcomic page. User had the possibilities to give feedback , but that's not useful anymore



Old Questions :

( do not answer now, the test is over , check the next entry in 'Lab' category to know the results )


1. Could you see this black and white fake comic page ? images and texts ? does it look exactly like this image ?

2. Can you save this image on your disk and edit it with the open-source vector program Inkscape ? Is it easy to do ?

3. Do you know how to use Github ?




link   Zlata Medovaya, ru-translator     -

1. I can see images and texts, but fonts are missed and replaced by Arial x_x
2. I can save it, but not open or edit it. Sorry, don't have Inkscape.
3. No :(
Congratulations on the new site~

link   David REVOY   Author, -

@Zlata Medovaya, ru-translator : Hey Zlata :-) Thanks you for your test ! ( and also for sending the very first comment on Pepper&Carrot :-P  ) . Ok, it means probably that I failed with the font. I can see it correctly here because I have the font http://www.dafont.com/lavi.font  installed ... I'll do research to find a way to encapsule the font inside the SVG ( is it possible? )  , the same way PDF does.

link   Peter Moonen     -

1. I used 2 webbrowsers (Firefox and IE) both with Windows 8 and Windows 7 and the Lavi font not installed on the PC: I can see the images but not the Lavi font. With the Lavi font installed (Windows 8) the font is correct .
SVG can embed fonts (http://www.w3.org/TR/SVG/fonts.html#SVGFontsOverview) but maybe Inkscape not.

2. I can save it and also edit it with Inkscape.
3. I never used it.

I can do more testing if you want.

link   Tom     -

The font here is being overwritten by website css.

If you right-click on the image and select open image in a new tab the text appears as intended when you view it there.

Keep in mind that if you are using a font that the person doesn't have installed on their computer it will only show the computers default font anyway.

link   Frémo     -

Salut David,

voici mes résultats sur Mac OSX 10.9.5 :

1. Si je n'active pas Lavi, les textes s'affichent avec la police par défaut

2. Le fichier enregistré s'ouvre dans Inkscape (0.91 Mac) mais n'est pas éditable (bizarre)... alors qu'il l'est bien dans Illustrator CC 2014.

3. Je n'ai encore que de vagues notions sur Github mais je vais m'y mettre très bientôt ! ;)

Merci pour ce nouveau site et tout ce que tu y partages :)

Frédéric

link   2000     -

1) Je peux. Néanmoins, la police a été remplacée par du Comics Neue, qui est la police que j'ai sélectionné par défaut pour mon browser (Firefox).
2) Sans problème. Aussi aisé à télécharger et à ouvrir que s'il s'agissait d'une image .jpg ou .png.
3) Qu'est-ce ?

Bonne chance pour les tests ! :)

link   Andrew     -

I've actually considered using SVG in my web comic too. I haven't decided yet, though. SVG is pretty well supported in modern browsers now, so compatibility is becoming less of a problem. Searchable text is a great idea, and the possibilities for CSS animation or JavaScript effects is exciting to think about... But there aren't nearly as many tools for working with SVG markup and templates as there are for HTML, so it will be a little trickier to maintain a consistent look on every page.

If you're still thinking about doing this, you might find this article helpful. http://css-tricks.com/using-svg/

link   David REVOY   Author, -

@Peter Moonen : Thank you for testing with the font installed and uninstalled and on Windows operating system. I cn't test Internet Explorer and it's good to know this browser display SVG.

@Tom : Good to know. I'll do a future test with providing Lavi via CSS and hosting it. Maybe it's a solution for my hosting but it's not really portable. Or maybe I should just try to clean all the text ID to get unique ID and not collide with a CSS rule. Thanks for the advice about the font.

@Frémo : Merci pour tes textes sur OSX ; c'est bizarre le problème de 'lecture seule' sur Inkscape ; je vais inspecter au cas ou c'est moi qui est buggé le fichier.

@2000 : Ca confirme ce que Tom dit alors, le CSS local de chaque browser à son mot à dire sur le SVG. Ca va pas me faciliter la tache tout ça :) Pour Github , c'est un site de 'social coding' sur la base de GIT un controller de version non-linéaire. Bref, une plateforme pour entreposer du code, et le partager pour qu'il soit éditer simultanement par plusieurs personnes. Mais peut-être un peu dur dur à utiliser pour des non developpeurs.

@Andrew : Thanks for the link, and for your feedback about your own research. Here I'm attracted by the easy 'editable text' aspect of the SVG. User can save the webcomic; and do direct change to the same file on his disk and republish. It should be that simple ; but it's not :) I'll keep working on it.

link   TheFaico     -

Salut David, félicitations par le nouveau site web pour Pepper&Carrot

1. Oui, je vois bien l'image de la page sur le browser tel que l'image du link. J'avais déjà installée la font Lavi pour mettre les textes en français et espagnol d'Espagne aux fichiers .kra du chapitre 3
2. Oui, je peux télécharger et editer sous Inkscape facilement, et je suis pas un artiste haha
3. Non, le code source c'est pas pour moi, au moins pour l'instant

link   Samir Osman     -

System: Fedora 20
Browser: Firefox 35.0

1. The font is not rendered correctly as it is missing from my system. but the images render perfectly.
2. Very easy to save and edit the file in inkscape
3. I already follow your github repo ;)

link   Tharinda     -

Hi,
I have Identified that the Google Chrome doesn't support Svgs. So it appears as a Jpeg file.
Then I tried it via Firefox, fortunately it supports SVG.
It was downloaded and edited them in inkscape easily.
I think it almost achieves your target.
Because, only translators need to edit them.

link   Pavel     -

1) All shapes are on their places, but fonts are missing and replaced by default.
2) No problem opening them with inkscape 0.48.4. But scenes looks like a raster images. Aren't they? Only text and its holders are vectorized objects.
3) Yes.

link   David Revoy   Author, -

Yes, that's exact : images are still raster. The footprint of all of this graphics in pure vector would be very big (and creation in inkscape very tedious). Thanks for testing!

Website maintainance: Adding new comments removed for the next 48h.