Difference between revisions of "Extension talk:LinkifySVG"

From Organic Design
Jump to: navigation, search
m
(Change source-code blocks to standard format)
 
Line 10: Line 10:
 
=== Linkifying an SVG ===
 
=== Linkifying an SVG ===
 
First the ''xlink'' namespace must be added to the SVG opening element:
 
First the ''xlink'' namespace must be added to the SVG opening element:
{{code|<pre>xmlns:xlink="http://www.w3.org/1999/xlink"</pre>}}
+
<source>
 +
xmlns:xlink="http://www.w3.org/1999/xlink"
 +
</source>
  
 
Next the XML must be parsed and any text elements with matching content converted by surrounding it with an ''a'' element. Here's an example of a text element from an SVG created with Inkscape which has been simplified a bit for clarity and linkified.
 
Next the XML must be parsed and any text elements with matching content converted by surrounding it with an ''a'' element. Here's an example of a text element from an SVG created with Inkscape which has been simplified a bit for clarity and linkified.
{{code|<xml>
+
<source lang="xml">
 
<a xlink:href="http://www.organicdesign.co.nz/foo">
 
<a xlink:href="http://www.organicdesign.co.nz/foo">
 
     <text xml:space="preserve" style="font-size:40px;fill:#000000;font-family:Arial" x="225" y="452" id="text2456">
 
     <text xml:space="preserve" style="font-size:40px;fill:#000000;font-family:Arial" x="225" y="452" id="text2456">
Line 21: Line 23:
 
     </text>
 
     </text>
 
</a>
 
</a>
</xml>}}
+
</source>
  
 
=== Intercepting uploaded SVG's ===
 
=== Intercepting uploaded SVG's ===
 
I've used the [[MW:Manual:Manual:Hooks/UploadForm:BeforeProcessing|UploadForm:BeforeProcessing hook]] which passes the ''UploadForm'' object containing the temp file, file size and original name. The temp file can be modified if less than a certain size and having an ''svg'' extension. I used this rather than later hooks because otherwise the content hash and size properties will not match the final file.
 
I've used the [[MW:Manual:Manual:Hooks/UploadForm:BeforeProcessing|UploadForm:BeforeProcessing hook]] which passes the ''UploadForm'' object containing the temp file, file size and original name. The temp file can be modified if less than a certain size and having an ''svg'' extension. I used this rather than later hooks because otherwise the content hash and size properties will not match the final file.
 
__NOTOC__
 
__NOTOC__

Latest revision as of 18:11, 22 May 2015

Purpose

This extension is planned to intercept uploading of SVG files and convert any text in them into links if they contain a valid URL or are surrounded by double square brackets to indicate a wiki article.

Current state

The current version intercepts correctly and adjusts any text surrounded by double square brackets (doesn't do URL format yet). Note that it only works when the whole text element is surrounded by double square brackets, it doesn't currently work for square brackets within fragments of the text but it could be extended to handle this later.

Another issue is that SVG's are actually rendered by the server and sent to the browser as PNG's. To allow the links to render relies on the browsers SVG rendering capability and will need to be embedded within the page using raw HTML, or via a template that does so.

Development notes

Linkifying an SVG

First the xlink namespace must be added to the SVG opening element:

xmlns:xlink="http://www.w3.org/1999/xlink"

Next the XML must be parsed and any text elements with matching content converted by surrounding it with an a element. Here's an example of a text element from an SVG created with Inkscape which has been simplified a bit for clarity and linkified.

<a xlink:href="http://www.organicdesign.co.nz/foo">
    <text xml:space="preserve" style="font-size:40px;fill:#000000;font-family:Arial" x="225" y="452" id="text2456">
        <tspan sodipodi:role="line" id="tspan2458" x="225.71429" y="452.36218">
            foo
        </tspan>
    </text>
</a>

Intercepting uploaded SVG's

I've used the UploadForm:BeforeProcessing hook which passes the UploadForm object containing the temp file, file size and original name. The temp file can be modified if less than a certain size and having an svg extension. I used this rather than later hooks because otherwise the content hash and size properties will not match the final file.