User:JoKalliauer/RepairFlowRoot

The black rectangle bug is a frequent artifact on Wikimedia's SVG files, linked to our SVG to PNG rendering technology. There are serveral ways to remove Flow-Text.

Example

A very simple example of flow-text (italic is variable or optional)

<flowRoot optionalFlowRootAttributes="value1" >
 <flowRegion>
  <rect x="375" y="182" width="132" height="8"/>
 </flowRegion>
 <flowPara optionalFlowParaAttributes="value2">Some Text</flowPara>
</flowRoot>

That the black square won't get rendered (Text-Editor)

add a fill-opacity="0" in the <rect … fill-opacity="0"/> (or in <path d="…" fill-opacity="0">)

Solution 1 (most basic, will remove the black square)

<flowRoot optionalFlowRootAttributes="value1">
 <flowRegion>
  <rect x="375" y="182" width="132" height="8" fill-opacity="0"/>
 </flowRegion>
 <flowPara optionalFlowParaAttributes="value2">Some Text</flowPara>
</flowRoot>

Replace the flow-text by <text> using (Text-Editor)

Solution 2 (proper solution, but in combination with transform="…" sometimes the text might get replaced)

<text x=\"375\" y=\"182\" optionalFlowRootAttributes="value1" optionalFlowParaAttributes="value2">Some Text<\/text>

There is also an automatic script (available on Github(no maintainance since 2018-02-10)):

sed -ri "s/<flowRoot([-[:alnum:]\.=\" \:\(\)\%\#\,\';]*)><flowRegion([-[:alnum:]=:\" ]*)><rect( id=\"rect[-[:digit:]]{4,7}\"|) x=\"([[:digit:]\. ]+)\" y=\"([-[:digit:]\. ]+)\"([[:lower:][:digit:]=\.\" \#]+)\/><\/flowRegion><flowPara([-[:alnum:]\.=\" \:\#;]*)>([-[:alnum:] \{\}\ \ ]+)<\/flowPara><\/flowRoot>/<text x=\"\4\" y=\"\5\"\1><tspan x=\"\4\" y=\"\5\"\7>\8<\/tspan><\/text>/g" $i

Replace notempty flow-text using (Inkscape)

• Click on the in Inkscape visible Text or click on the <flowRoot>-tag in the XML Editor of Inkscape
• go to Text-menu: Click on Convert to Text (you could also click on Unflow, but this one sometimes replaces the text)
• repeat for all (nonempty) flow-texts
• save file (If you save as a Optimized-SVG you will get a flowRoot-warning if you forgot one text)

There is also an automatic script (available on Github):

inkscape filename.svg --verb=EditSelectAll --verb=ObjectFlowtextToText --verb=FileSave --verb=FileClose --verb=FileQuit

Delete empty flow-text using (Text-Editor)

Following examples can be deleted:

flowPara only containing spaces

<flowRoot optionalFlowRootAttributes="value1" >
 <flowRegion optionalflowRegenAtributes="value3">
  <rect x="375" y="182" width="132" height="8"/>
 </flowRegion>
 <flowPara optionalFlowParaAttributes="value2"> </flowPara>
</flowRoot>

empty/selfclosing flowPara

<flowRoot optionalFlowRootAttributes="value1" >
 <flowRegion optionalflowRegenAtributes="value3">
  <rect x="375" y="182" width="132" height="8"/>
 </flowRegion>
 <flowPara optionalFlowParaAttributes="value2"/>
</flowRoot>

empty/selfclosing flowRoot

<flowRoot optionalFlowRootAttributes="value1"/>

not existing flowPara

<flowRoot>
 <flowRegion\/>
 <flowDiv\/>
<\/flowRoot>

Script

You may also use the following commands:

 sed -i 's/<flowPara\/>//g;s/<flowRoot\/>//g' $i
 sed -ri -e ':a' -e 'N' -e '$!ba' -e "s/<flowRoot>[[:space:]]*<flowRegion(\/|>[[:space:]]*<path d=\"[-[:digit:]hmvz\. ]*\"\/>[[:space:]]*<\/flowRegion)>[[:space:]]*(<flowDiv\/>|)[[:space:]]*<\/flowRoot>//g" $i #delete empty flowRoot
 sed -ri -e ':a' -e 'N' -e '$!ba' -e "s/<flowRoot([-[:alnum:]\.=\" \:\(\)\%\#\,\';]*)>[[:space:]]*<flowRegion([-[:alnum:]=:\" ]*)>[[:space:]]*(<path[-[:alnum:]\.=\"\ \#]*\/>|<rect( id=\"rect[-[:digit:]]{2,7}\"|) x=\"([[:digit:]\. ]+)\" y=\"([-[:digit:]\. ]+)\"([[:lower:][:digit:]=\.\" \#]+)\/>)[[:space:]]*<\/flowRegion>[[:space:]]*(<flowPara\/>|<flowPara([-[:alnum:]\.=\" \:\#; ]*)>([[:space:] ]*)<\/flowPara>)[[:space:]]*<\/flowRoot>//g" $i
 

See also

• fr:Wikipédia:Atelier graphique/FAQ SVG#Un carré noir est visible sur l'image