[發明專利]可縮放矢量圖形包

在審

• 申請號: 201780045114.X
• 申請日: 2017-07-06
• 公開（公告）號: CN109478202A
• 公開（公告）日: 2019-03-15
• 發明（設計）人: L·斯坦福;M·喬什;W·莫伊;A·P·比爾克
• 申請（專利權）人: 微軟技術許可有限責任公司
• 主分類號: G06F17/21
• 分類號: G06F17/21;G06F17/22;G06T11/60
• 代理公司: 北京市金杜律師事務所 11256
• 代理人: 王茂華

提供了一種用于創建遵循主題的svg元素的SVG包的SVG系統。SVG系統訪問要被包括在包中的svg元素并且訪問主題的主題屬性。針對每個svg元素，SVG系統檢索svg元素，為svg元素建立名稱，修改svg元素以使用由主題指定的主題屬性的值，并且將svg元素和所建立的名稱存儲在SVG包中。為了使用SVG包，網頁包括主題屬性的值的規范和對svg元素的引用。在渲染網頁時，svg元素被插入到網頁中的引用的位置處，并且基于主題屬性的值來被處理，以針對網頁來生成圖形。

背景技術

可縮放矢量圖形(“SVG”)是一種用于描述二維圖形(例如，徽標或)的語言。SVG指定能夠用于使用可擴展標記語言(“XML”)來描述圖形的元素和屬性。SVG支持描述三種類型的圖形對象：矢量圖形形狀、圖像和文本。矢量圖形形狀是一條或多條線的路徑，諸如線、線的路徑、圓形、矩形或任意多邊形。SVG支持設置圖形對象的各種屬性，諸如字體樣式、筆劃寬度、筆劃圖案、筆劃顏色、填充顏色、濾鏡效果等。

SVG的主要元素是svg元素，它包括其他元素和屬性。其他元素用于渲染形狀，諸如圓形、矩形、橢圓形、路徑等，并且用于渲染圖像和文本。svg元素的屬性指定圖形的高度和寬度(例如，以像素為單位)、與原點相對應的點(其默認為左上角)等。圖形的坐標相針對原點來指定。各種形狀的屬性是特定于形狀的。例如，圓的屬性指定圓的中心和圓的半徑，并且矩形的屬性指定該矩形在圖形內的左側和頂部位置以及矩形的高度和寬度。其他屬性可以用于不同類型的形狀。例如，矩形和圓形兩者的屬性指定筆劃寬度、筆劃顏色、填充顏色等。以下是定義在正方形內包括圓的圖形的svg元素的示例。

示例1

在svg元素的開放svg標記中，寬度(width)和高度(height)屬性指定圖形為400×180。在矩形(rect)元素中，寬度(width)和高度(height)屬性指定矩形的大小為150×150，x和y屬性指定矩形位于位置(50，20)處，并且樣式(style)屬性指定矩形的各種屬性，諸如填充顏色和填充不透明度。在圓形(circle)元素中，r屬性將半徑指定為75，cx和cy屬性指定圓的中心位于位置(125，75)處，并且填充(fill)屬性指定圓的填充顏色。

因為SVG允許描述從非常簡單到非常復雜的圖形，所以SVG是用于描述網頁中的圖形的非常流行的選擇，其在超文本標記語言(“HTML”)文檔中被描述。網頁可以包括諸如用于表示復雜符號、公司徽標、動畫等的很多圖形，其使用SVG而被描述。開發人員可以使用由另一開發人員開發的svg元素，而不是為復雜圖形創建svg元素。例如，SVG開發人員可以為各種流行圖形開發svg元素，并且使其對網頁開發人員可用。網頁開發人員可以在網頁中包括svg元素，或者在網頁中包括對svg元素的引用。然而，網頁開發人員可能需要修改svg元素以匹配網頁的主題。例如，針對復雜符號的svg元素可以指定為紅色的填充顏色，這可能不適合基于藍色的網頁的主題。修改svg元素以確保它們與網頁的主題相一致可能需要花費大量的精力。

發明內容

提供了一種用于創建遵循主題的SVG定義(例如，svg元素)的SVG包的SVG系統。SVG系統訪問要被包括在包中的SVG定義并且訪問主題的主題屬性。針對每個SVG定義，SVG系統檢索SVG定義。SVG系統還為SVG定義建立名稱。SVG系統修改SVG定義以使用由主題指定的主題屬性的值。SVG系統將SVG定義和所建立的名稱存儲在SVG包中。SVG系統還可以向SVG包添加初始化函數。

為了使用SVG包，網頁包括主題的主題屬性的值(并且通常還包括非主題屬性的值)的規范以及對SVG包中的SVG定義的引用。在渲染網頁時，由SVG包指定的初始化函數被執行。針對每個SVG定義，初始化函數生成用于將該SVG定義插入到網頁中對SVG定義的引用的位置處的函數。當遇到對網頁中的SVG定義的引用時，執行針對SVG定義而生成的函數，以將SVG定義插入在對SVG定義的引用的位置處。基于主題屬性的值來處理SVG定義，以針對網頁來生成圖形。