SVG is not just for icons, we should treat it like a first-class citizen
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 50 | |
| Autor | ||
| Lizenz | CC-Namensnennung 3.0 Deutschland: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/55197 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache | ||
| Produktionsjahr | 2019 |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
Plone Conference 20197 / 50
5
8
10
11
14
16
17
25
26
27
28
29
32
34
35
36
37
41
42
44
46
49
50
00:00
GrundraumFormation <Mathematik>BitSkalierbarkeitVektor <Datentyp>VektorraumJSONXMLVorlesung/Konferenz
00:41
EbeneBildgebendes VerfahrenSelbst organisierendes SystemMereologieKlasse <Mathematik>BildschirmsymbolBitmap-GraphikVorzeichen <Mathematik>MeterNP-hartes ProblemTouchscreenMultiplikationsoperatorComputerunterstützte ÜbersetzungComputeranimation
02:13
EbeneApproximationTexteditorElektronische PublikationDifferenteStandardabweichungKonfigurationsraumComputeranimation
03:14
MathematikVisualisierungVerschlingungDateiformatDatenbankSoftware
04:11
Eingebettetes SystemEbeneAggregatzustandBesprechung/Interview
04:44
EbeneMathematikStatistische HypotheseVirtuelle MaschineQuick-SortInternetworkingInstantiierungKlassische PhysikMultiplikationsoperatorStandardabweichungComputeranimationBesprechung/InterviewXML
05:44
EbeneSoftwareTouchscreenSkalierbarkeitStandardabweichungBenutzerbeteiligung
06:28
SoftwaretestEbeneKanal <Bildverarbeitung>BitDatensichtgerätWeb-SeiteSelbstrepräsentationTouchscreenEigentliche AbbildungComputeranimation
07:29
EbeneInformationSpieltheorieEreignishorizontTermElektronisches ForumVorzeichen <Mathematik>Ganze ZahlPlot <Graphische Darstellung>Bitmap-GraphikElektronische PublikationSystemprogrammComputeranimationProgramm/QuellcodeXML
08:18
EbeneSoundverarbeitungBildgebendes VerfahrenKlon <Mathematik>MereologieZentrische StreckungTeilbarkeitInstantiierungRandomisierungNeuroinformatikUmsetzung <Informatik>
09:13
EbeneVerschlingungGammafunktionFormale SpracheVisualisierungInstantiierungUmsetzung <Informatik>Office-PaketComputeranimation
10:15
EbeneSpieltheorieSpannungsmessung <Mechanik>Klon <Mathematik>Fächer <Mathematik>InformationsüberlastungBitmap-GraphikBrowserARM <Computerarchitektur>MultiplikationsoperatorDemo <Programm>
11:18
Wurm <Informatik>EbeneOktaederBildgebendes VerfahrenWort <Informatik>Web-SeiteHilfesystemSoundverarbeitungDatensichtgerätQuick-SortXMLComputeranimation
12:43
EbeneCoxeter-GruppeTexteditorStandardabweichungProgramm/QuellcodeComputeranimationBesprechung/Interview
13:20
EbeneProgramm/QuellcodeComputeranimation
13:41
EbeneProjektive EbeneZusammenhängender GraphComputeranimation
14:06
EbeneDiagrammInformationTypentheorieInhalt <Mathematik>VisualisierungZahlenbereichUmwandlungsenthalpieCanadian Mathematical SocietyWeb SiteDifferenteWeb logDickeMultiplikationsoperatorEinsDatenbankInstantiierungBesprechung/InterviewProgramm/QuellcodeComputeranimation
15:27
Explorative DatenanalyseCanadian Mathematical SocietyMultiplikationsoperatorProgramm/Quellcode
15:49
EbeneVerschlingungKomponente <Software>MultigraphCodeProgrammierungProgrammbibliothekVisualisierungGüte der AnpassungExogene VariableZusammenhängender GraphNotebook-ComputerVererbungshierarchieMultigraphRechter WinkelGamecontrollerSensitivitätsanalyseKlon <Mathematik>VerschlingungTexteditorInstantiierungWeb Site
18:16
EbeneLogischer SchlussBildgebendes VerfahrenCodeTransformation <Mathematik>HalbleiterspeicherTypentheorieAusdruck <Logik>GrenzschichtablösungDichte <Stochastik>Klon <Mathematik>Affiner RaumBitDivisionHyperbelverfahrenInhalt <Mathematik>MomentenproblemProjektive EbeneResultanteVirtuelle MaschineDatensichtgerätQuick-SortSystemprogrammExogene VariableTexteditorFontProzess <Informatik>Coxeter-GruppeATMKünstliches LebenWort <Informatik>Bitmap-GraphikBrowserMailing-ListeDateiformatMinimumQuellcodeMultigraphElektronische PublikationCanadian Mathematical SocietyOpen SourceNeuroinformatikMultiplikationsoperatorSchreiben <Datenverarbeitung>RohdatenComputerspielDatensatzGraphCodierungIterationBildschirmmaskeInternetworkingBasis <Mathematik>InstantiierungPunktKommunikationsdesignGRASS <Programm>sinc-FunktionVorlesung/Konferenz
25:28
EbeneBeschreibungskomplexitätAbstraktionsebeneSystemprogrammierungVideokonferenzFormation <Mathematik>JSONXMLComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:13
So, yes, today I want to talk about one of my favorite subjects, and that is data, and
00:21
one of my other favorite subjects, which is Britney Spears, and the two are definitely connected, as I hope to show. So SVG, scalable vector graphics, should be nice, but there are certain problems. So, first of all, a little bit about me, indeed. I tend to keep things, way too many things, afloat.
00:48
I work for the clean clothes campaign, I spend some time on Plone, I'm also a film festival organizer, and I am a recovering data scientist. The last part is the hard part.
01:04
Yeah, science. If you, as you can see, if you are a data scientist, you can prove that Schrodinger's cat is alive, and if you mess the science up, you get more of them. But this is also meant as a trigger warning. My talks tend to contain moving images, just so you know.
01:25
So, oops, so, why am I mixing metaphors? I was talking about Britney and this is Lady Gaga. Well, why SVG? First of all, we're using it for icons. We all know they're better than bitmap
01:42
icons, because they scale, they look nice on expensive phones, on 8k screens, on whatever. So that's great. But, well, you can do a lot more with them, you can really have nice artworks in SVG. And yeah, indeed they are scalable, so for digital signage, for the screens of the future,
02:03
when everybody will have like a foldable phone which folds into two meter size, you want things to be clear and sharp. And, oh yeah, another icon. There are even more advantages.
02:21
They are just text inside. An SVG you can actually open in the text editor, so they're human readable, or whatever your approach approximation for human is. They are also well defined, they are standardized-ish. There are some dialects,
02:44
but in general they are pretty easy to read, pretty easy to manipulate, and pretty standardized across different tools and ways to make them. And this should be really easy for us. It's basically XML. All an SVG file is is a bunch of XML. We're Plone, we know XML. We even
03:08
used to write our configs in XML. We should know this stuff. But there's a lot more you can do even with SVGs. As I said, it is the preferred format
03:23
these days for data visualization. There are a lot of data visualization tools out there that create large, complex, beautiful data vis. I will show some of the tools and links at the end. They're easy to produce externally outside of Plone in your specialized mathematics or
03:45
graphing software. They're easy to style, and you can just use CSS to style them. And you can animate them, really. SVGs can be really easily animated.
04:04
There is even an animation in the format itself, but external animation is even better. Finally we arrive at Brittany in her confused state. Animate? Yep, animate. There are libraries
04:23
available that do some CSS and JavaScript magic, and then you can animate your SVGs, which is awesome. So why do I keep referring to Brittany? Well, actually, Brittany has a lot to do with data science. Not so much she herself. Well, maybe she is a renowned scientist. I
04:42
actually don't know. But she is quite popular. Has been for a while. And there is sort of like a standard example that everybody uses, and that is the internet search data set. That's sort of everybody writes their thesis around that, because it's available, it's standard,
05:02
so people do that. It's used for machine learning, for lots of other thesis. This, for instance, is a recent example. This is from early this year, where people, very clever people from the MIT Institute of Technology, are still working on
05:25
the Britney Spears problem, finding ways in which people search for Britney Spears, how that changes over geography, over time, over moods, and how you can interpret that or misinterpret that. It's a classic problem, and yeah, that's why she's here.
05:45
So back to SVG. SVG is awesome. It's standardized, it's scalable, it's accessible. Because it's text, you can have screen readers read out the values. It is amazing.
06:01
You can theme it. It's made for the web. What do we do? We write software for the web. So let's get this done. This is easy peasy for Plone. Hey, come on, software for the web, XML, we can do this. Okay, so here we have a Plone site, and I fed it a couple of SVGs.
06:35
Some of them are a bit tricky, I admit that, but this is how it basically looks. So actually,
06:42
a few of them have some kind of representation. Most of them don't even show up unless you do a full screen, but yeah, they just don't show at all. And even if you put them in a page, yes, you can do some things with it,
07:02
but it's really hard. So you can scale them by just dragging, but it will not respect that. So after you save it, it just is gone. Others don't display at all. Others you can only scale horizontally. It is truly, truly, truly sad. You can't display an SVG in a page
07:26
properly. So yeah, Plone. Sniff. That really didn't work, so why didn't it work? Well,
07:45
here you can probably see in the background what's happening. Plone named file utils says, cannot handle SVG. Pill says, never heard of SVG. Not my problem. Probably broken.
08:02
No shit, Sherlock. They're trying to treat it as a bitmap. It's like, no, it's not a bitmap. So why do we even feed it to Pill? Because Pill does bitmaps. That's wrong. So stop treating it like a bitmap. Treating people or things as things they are not is just
08:24
rude. We should stop doing that. And so what we end up is basically computer says, no, which is not a situation that we want. So what happens? We cannot scale an SVG inside Plone.
08:42
You cannot say, I want to display it this size. Even if it sometimes displays, it will display at kind of a random scale factor, which is not very helpful. Sometimes it only shows part of the images, and many don't show at all. And okay,
09:03
I admit these were some tricky SVGs, but I can also show you that some of them are actually quite useful. For instance, this is an example of data science. This is every conversation ever spoken in the office. And which of the characters speaks to whom? So you can say like,
09:26
okay, these people talk a lot to each other. And what you mostly notice is that Michael talks a lot to himself. But I mean, these are, of course, these are funny, but these can actually be really helpful to have these kinds of data visualizations on your site. And some other,
09:50
this for instance, or this, this one, it should animate. And for instance, this one, I love
10:00
this SVG. It's actually useful. It shows you what sounds you make in all kinds of languages. And yeah, it looks a bit creepy, but yes, this is actually useful. So we should be able to display them. But as we saw, Plone really is bad at it. And so my plea is leave Britney
10:29
alone. Or don't treat an SVG like a bitmap. The browser is perfectly capable of displaying an SVG. We just don't need to mess with it. So it should be within our grasp.
10:46
But then again, yeah, Plone 5.2, it's been around. Plone has been around forever. So let's quickly move to the future where everything is better. Because the future is always better. And see how Volto does this. The future is always better. I don't know if there
11:09
did not end well. So demo time on Volto. Volto manages to not even display a single one.
11:26
It does so. It displays when you go directly to them. Sort of. I mean, it misses half of it. But yeah, okay. Not too bad. Let's see. Can I do the domino effect? Let's see. I mean, it has the animation. But it would be nice to see the entire thing.
11:47
What more can we try? We can try the creepy mouth. That was the one with all the voices. Not really optimal. I made a page. That really doesn't help if you start editing it.
12:08
Let's see. So here, this is an image. And it should actually be the entire word, the domino effect. But maybe if I stretch it. Let's see if that works. Yeah, sort of. But why is it
12:31
all the way here? I have no idea. So actually, in a lot of ways, this is even worse.
12:42
So let's go back to the presentation. This was Volto. And yeah. Some of the ways that the Volto editor, I took the build out from this morning. So it's right up to the latest. And really, this is not what we should be doing in 2019.
13:09
So, because in every aspect, this was worse than what Standard Plone did with technology that is a few years old. And I know Volto is quite young. But yeah. Come on. We can do better,
13:29
I hope. And I really think we should be... Why is this thing showing? Whatever. We should think bigger, better, and to the future. And especially to science.
13:46
There are indeed many React components already available that deal with SVGs and with data. They get their live data via JSON. Sounds familiar? We should be able to handle JSON
14:00
in a Volto project. That's kind of what it is. So yeah. That should be doable. And there could be so much more that we could do with it. And that's what I want to plead for. So what would be winning for me for the use of SVGs and data visualization in Volto? For
14:22
the live content of my site that says, which of my articles are the most popular? Which are the ones that are obviously orphaned? Nobody has edited them in ten years. It may be time to either retire them or put a warning on them like this has never been updated. The information
14:43
may still be valid. But honestly, we don't know. Or anything else. You could also have more complicated data saying, okay, do specific tags or type of documents or different lengths of documents affect popularity? Are my long reads really popular or should I focus more on short
15:04
blog posts? Those things you can really like multi-vector diagrams. Those need data visualization because otherwise you get numbers and numbers tend to make people fall asleep. So that's why you need visualization. And I'm sure you all have better ideas as well.
15:25
So let's get to work. We have new times. We have new challenges. We have a new CMS coming out, Volto. And now is the time to insert some sane behavior towards SVGs in it. And yeah.
15:42
Make them functional. Make them beautiful. Make them scalable. And make them interactive. Yeah. As said, there are many components already available. This is not rocket science. This is so within our reach. But yeah. Unless we mess up at the last minute.
16:05
We're very close to it. But yeah. We are just not quite there. That's basically already it. Although I have a lot of not that you folks care. But we do have links.
16:22
One thing I or one program I really recommend to everybody is raw graphs. It's done by the Polytechnica de Milano. And it's an awesome program to make visualizations. You can run it locally. All your data stays in your own laptop. So you can use it on sensitive data. It's amazing.
16:44
SandDance is also really nice. It's a super good visualization from Microsoft. They open sourced it last week. And it's available, for instance, directly in VS code. But also as React components. Awesome. Snap is the most well-developed library to animate SVG's. Vega
17:09
is a really nice editor. Half of Vega is contained within SandDance. And then there's Nivo, Semiotic, Victory in React Vis, for instance, who also have really nice visualization
17:23
tools as ready-made React components. Where all you have to say, like, okay, where's the JSON that feeds me? And then Plone's responsibility would be to say, like, oh, you look hungry for data. Here's some data. So this should be within our reach. And I sincerely hope that we can
17:42
get there. And I can hopefully someday get some satisfaction in data. But, well, watch the end of this. Satisfaction may not be within the reach right now. But at least we should try. Because it would create better websites. Better user experience. Better concept control. And
18:05
we should, we're Plone. We should strive for the best. Thank you. So, for designing SVG's, I've experimented with using Inkscape. And, boy, is that terrible
18:29
for exporting to SVG. And it's been very frustrating. So, out of your list here, what would be a good replacement for that kind of? Raw graphs. You create your SVG, if it
18:41
contains data and you have it sort of in an Excel or in CSV or anything like that. In first instance, use raw graphs. Probably send ends will work as well. Raw graphs, actually, they tell you to afterwards use Inkscape to beautify it. Because raw graphs makes, for instance, the legends in a quite boring font. So you then afterwards import it into
19:07
Inkscape and say, like, could you please use a nice font that is consistent with our house style. So then you embellish it a little bit later on in Inkscape. But don't do data in Inkscape. That's not working. Yeah, I actually didn't mean data at all. Just I'm not satisfied with
19:25
Inkscape's ability to even generate art. Well, it's not that great for SVG exports. I find, yeah, for me, it kind of works. But I'm sure you can do it with Adobe tools. But yeah,
19:42
I work on Linux. So I prefer open source tools. For me, it works. But yeah. Okay. Do any of the others at the bottom of the list do any allow you to have any kind of design, like graphic design? Vega does. Vega is really nice. It's sort of like what we could
20:01
actually go to. No, we can't, because I don't have internet. How do I get back? Vega is basically a live coding or display of SVGs. So you type formulas in one point,
20:21
or you can also paint, and it shows you the result in the other half of the browser. It's an awesome sort of like, you play around and you immediately see what you get. All right, cool. Thank you. No, it's okay. But yeah, any kind of data start off in
20:42
raw graphs and SandDance. SandDance is slightly better at handling lots and lots of data. Raw graphs handles up to, I would say, 200,000, 300,000 data items perfectly. But if you're in the millions, it can become slow depending on if you have enough memory in your machine.
21:03
But the first couple of hundred thousand of data points, it has no issues whatsoever. Any other questions? So I had a customer who were really crazy about SVG, doing a lot with
21:23
that charts, even kind of presentation. And yeah, he was totally disappointed that Plone wasn't able to manage it properly, as you said. We ended up pasting the code basically into an HTML mode into the TinyMCU, and it actually works. So not perfect, but good enough.
21:44
There are workarounds if you directly go to the source code and then type in, but that's honestly not the way that we want to tell people to work. It's sort of like, why do you even need a CMS and an editor if you want to write bare knuckles HTML?
22:02
That's not what we do. That's not very customer-friendly, so we simply should do better. In a Plone 3 project several decades ago, you basically had a similar requirement. So basically problem with the process, it was basically that you upload SVGs as images. So that's basically
22:22
the core problem. So as a replacement, we just created a new content type, SVG something, and then updated or added this as an opportunity in TinyMCU to integrate the stuff and basically it just includes the SVG as XML within the writing process as a port transform. So
22:42
it's basically the way to go. And you've been asking about tools. There is from Affinity and company, they have some nice tools as replacements for Adobe. There's Affinity Designer, which is pretty inexpensive, something like 60 or 70 euros,
23:01
and it's very capable of doing the same stuff as Inkscape, but much cheaper than Adobe tools. Yeah, I am aware that several people have created content. I've done that on the site as well.
23:23
But yeah, I really think SVG, it's not an exotic format. It really should be treated as first-class citizen, just like any other. Paul, did you actually create an issue for that so that someone who's capable of that can fix that? Not yet, because I was very busy.
23:47
Yes, but yeah, I think this should be a blip. But yeah, I had no time to formulate a well thought out blip. But I know that that is the way and I will do so. Actually, I do have the other question because a lot of the things we do at the moment
24:06
between the division in files and images and all the images in clone are de facto bitmap files or handled as bitmap files. Can't we get rid of the differentiation and make it
24:25
in the one content type a separation of concerns, what it is? Ideally, for me also, you should just upload stuff and the computers should be smart enough to know what kind of file that is. I mean, even Linux, the file utility has been doing that for like 30 years.
24:46
That is not rocket science. It should not be the mental responsibility of the end user to figure out if it's a PDF, I should upload it as a PDF. If it's a Word document, I should upload it as a Word document. Computers should do dumb shit for us.
25:04
That's what they're there for. Okay, we don't have time for any other questions. Thank you for now. I believe you can just ask more questions to Paul
25:21
during the day if you want. Thank you again, Paul.